Scroll to a specific Element Using html

Question

Is there a method in html which makes the webpage scroll to a specific Element using HTML

User · Answer

By using an href attribute inside an anchor tag you can scroll the page to a specific element using a # in front of the elements id name.

Also, here is some jQuery/JS that will accomplish putting variables into a div.

<html>
<body>

Click <a href="#myContent">here</a> to scroll to the myContent section.

<div id="myContent">
...
</div>

<script>
    var myClassName = "foo";

    $(function() {
        $("#myContent").addClass(myClassName);
    });
</script>

</body>

User · Answer

Yes  you may use an anchor by specifying the id attribute of an element and then linking to it with a hash   For example  taken from the W3 specification    You may read more about this in  lt A href   section2  gt Section Two lt  A gt      later in the document  lt H2 id  section2  gt Section Two lt  H2 gt     later in the document  lt P gt Please refer to  lt A href   section2  gt Section Two lt  A gt  above for more details

User · Answer

You should mention whether you want it to smoothly scroll or simply jump to an element  Jumping is easy  amp  can be done just with HTML or Javascript  The simplest is to use anchor s  The limitation is that every element you want to scroll to has to have an id  A side effect is that  theID will be appended to the URL     lt a href   scroll  gt Go to Title lt  a gt   lt div gt     lt h1 id  scroll  gt Title lt  h1 gt   lt  div gt    You can add CSS effects to the target when the link is clicked with the CSS  target selector     With some basic JS you can do more  namely the method scrollIntoView    Your elements don t need an id  though it is still easier  e g     function onLinkClick       document getElementsByTagName  h2   3  scrollIntoView         will scroll to 4th h3 element       Finally  if you need smooth scrolling  you should have a look at JS Smooth Scroll or this snippet for jQuery   NB  there are probably many more

User · Answer

Yes you use this   lt a href   google  gt  lt  a gt    lt div id  google  gt  lt  div gt    But this does not create a smooth scroll just so you know   You can also add in your CSS   html     scroll-behavior  smooth

User · Answer

Year 2020  Now we have element scrollIntoView   method to scroll to specific element   HTML   lt div id  my element  gt   lt  div gt    JS  var my element   document getElementById  my element     my element scrollIntoView     behavior   smooth     block   start     inline   nearest        Good thing is we can initiate this from any onclick event and need not be limited to  tag

User · Answer

The above answers are good and correct  However  the code may not give the expected results  Allow me to add something to explain why this is very important   It is true that adding the scroll-behavior  smooth to the html element allows smooth scrolling for the whole page  However not all web browsers support smooth scrolling using HTML   So if you want to create a website accessible to all user  regardless of their web browsers   it is highly recommended to use JavaScript or a JavaScript library such as jQuery  to create a solution that will work for all browsers   Otherwise  some users may not enjoy the smooth scrolling of your website   platform   I can give a simpler example on how it can be applicable    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script gt  x000D    document  ready function    x000D     Add smooth scrolling to all links x000D     a   on  click   function event    x000D     Make sure this hash has a value before overriding default behavior x000D  if  this hash           x000D     Prevent default anchor click behavior x000D  event preventDefault    x000D     Store hash x000D  var hash   this hash  x000D     Using jQuery s animate   method to add smooth page scroll x000D     The optional number  800  specifies the number of milliseconds it takes to scroll to the specified area x000D     html  body   animate   x000D  scrollTop    hash  offset   top x000D     800  function    x000D     Add hash     to URL when done scrolling  default click behavior  x000D  window location hash   hash  x000D      x000D       End if x000D      x000D      x000D   lt  script gt  x000D   lt style gt  x000D   section1   x000D  height  600px  x000D  background-color  pink  x000D    x000D   section2   x000D  height  600px  x000D  background-color  yellow  x000D    x000D   lt  style gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt h1 gt Smooth Scroll lt  h1 gt  x000D   lt div class  main  id  section1  gt  x000D   lt h2 gt Section 1 lt  h2 gt  x000D   lt p gt Click on the link to see the  smooth  scrolling effect  lt  p gt  x000D   lt a href   section2  gt Click Me to Smooth Scroll to Section 2 Below lt  a gt  x000D   lt p gt Note  Remove the scroll-behavior property to remove smooth scrolling  lt  p gt  x000D   lt  div gt  x000D   lt div class  main  id  section2  gt  x000D   lt h2 gt Section 2 lt  h2 gt  x000D   lt a href   section1  gt Click Me to Smooth Scroll to Section 1 Above lt  a gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you use Jquery you can add this to your javascript       smooth-goto   on  click   function              html  body   animate  scrollTop    this hash  offset   top - 50   1000       return false        Also  don t forget to add this class to your a tag too like this    lt a href   id-of-element  class  smooth-goto  gt Text lt  a gt

User · Answer

lt  -- HTML -- gt   lt a href   google  gt  lt  a gt   lt div id  google  gt  lt  div gt     CSS   html   scroll-behavior  smooth       Additionally  you can add html   scroll-behavior  smooth    to your CSS to create a    smooth scroll

User · Answer

Should you want to resort to using a plug-in  malihu-custom-scrollbar-plugin  could do the job  It performs an actual scroll  not just a jump  You can even specify the speed momentum of scroll  It also lets you set up a menu  list of links to scroll to   which have their CSS changed based on whether the anchors-to-scroll-to are in viewport  and other useful features    There are demo on the author s site and let our company site serve as a real-world example too

User · Answer

x000D   x000D    lt nav gt         lt a href   section1  gt 1 lt  a gt          lt a href   section2  gt 2 lt  a gt          lt a href   section3  gt 3 lt  a gt       lt  nav gt       lt section id  section1  gt 1 lt  section gt       lt section id  section2  class  fifty  gt 2 lt  section gt       lt section id  section3  gt 3 lt  section gt            lt style gt           padding  0  margin  0         nav           background  black          position  fixed                a           color   fff          display  inline-block          padding  0 1em          height  50px                section           background  red          height  100vh          text-align  center          font-size  5em                html           scroll-behavior  smooth                 section1          background-color green                 section3          background-color yellow                      lt  style gt            lt script src  http   code jquery com jquery-latest min js  gt  lt  script gt       lt script type  text javascript   gt          document  on  click    a href         function  event            event preventDefault                    html  body   animate               scrollTop      attr this   href    offset   top            500                  lt  script gt         x000D   x000D   x000D

[html] Scroll to a specific Element Using html

Examples related to html

Examples related to css