How to scroll HTML page to given anchor

Question

I   d like to make the browser to scroll the page to a given anchor  just by using JavaScript   I have specified a name or id attribute in my HTML code     lt a name  anchorName  gt    lt  a gt    or    lt h1 id  anchorName2  gt    lt  h1 gt    I   d like to get the same effect as you   d get by navigating to http   server com path anchorName  The page should be scrolled so that the anchor is near the top of the visible part of the page

User · Answer

2018-2020 Pure js   There is a very convenient way to scroll to the element   el scrollIntoView     behavior   smooth      smooth scroll   block   start     the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area       But as far as I understand he does not have such good support as the options below     Learn more about the method     If it is necessary that the element is in the top   const element   document querySelector   element   const topPos   element getBoundingClientRect   top   window pageYOffset  window scrollTo     top  topPos     scroll so that the element is at the top of the view   behavior   smooth     smooth scroll      Demonstration example on Codepen    If you want the element to be in the center   const element   document querySelector   element   const rect   element getBoundingClientRect      get rects width  height  top  etc  const viewHeight   Math max document documentElement clientHeight  window innerHeight    0    window scroll     top  rect top   rect height   2 - viewHeight   2    behavior   smooth     smooth scroll       Demonstration example on Codepen    Support     They write that scroll is the same method as scrollTo  but support shows better in scrollTo   More about the method

User · Answer

Smoothly scroll to the proper position  2019  Get correct y coordinate and use window scrollTo  top  y  behavior   smooth    const id    anchorName2   const yourElement   document getElementById id   const y   yourElement getBoundingClientRect   top   window pageYOffset   window scrollTo  top  y  behavior   smooth      With offset scrollIntoView is a good option too but it may not works perfectly in some cases  For example when you need additional offset  With scrollTo you just need to add that offset like this  const yOffset   -10    window scrollTo  top  y   yOffset  behavior   smooth

User · Answer

In 2018  you don t need jQuery for something simple like this  The built in scrollIntoView   method supports a  behavior  property to smoothly scroll to any element on the page  You can even update the browser URL with a hash to make it bookmarkable   From this tutorial on scrolling HTML Bookmarks  here is a native way to add smooth scrolling to all anchor links on your page automatically   let anchorlinks   document querySelectorAll  a href            for  let item of anchorlinks       relitere          item addEventListener  click    e   gt                    let hashval   item getAttribute  href                   let target   document querySelector hashval                  target scrollIntoView                           behavior   smooth                           block   start                                     history pushState null  null  hashval                  e preventDefault

User · Answer

This is a working script that will scroll the page to the anchor  To setup just give the anchor link an id that matches the name attribute of the anchor that you want to scroll to    lt script gt  jQuery document  ready function           a   click function        var id     this  attr  id      console log id     if   id     cet     id     protein            html  body   animate   scrollTop      name      id         offset   top    slow                    lt  script gt

User · Answer

A pure javascript solution without JQuery  Tested on Chrome  amp  I e  not tested on IOS  function ScrollTo name      ScrollToResolver document getElementById name       function ScrollToResolver elem      var jump   parseInt elem getBoundingClientRect   top    2     document body scrollTop    jump    document documentElement scrollTop    jump    if   elem lastjump    elem lastjump  gt  Math abs jump         elem lastjump   Math abs jump       setTimeout function     ScrollToResolver elem      100        else       elem lastjump   null          demo  https   jsfiddle net jd7q25hg 12

User · Answer

I know this is question is really old  but I found an easy and simple jQuery solution in css-tricks  That s the one I m using now     function          a href     not  href       click function         if  location pathname replace              this pathname replace            amp  amp  location hostname    this hostname          var target     this hash         target   target length   target       name     this hash slice 1               if  target length               html body   animate             scrollTop  target offset   top            1000           return false

User · Answer

Most answers are unnecessarily complicated   If you just want to jump to the target element  you don t need JavaScript     the link   lt a href   target  gt Click here to jump  lt  a gt     target element   lt div id  target  gt Any kind of element  lt  div gt    If you want to scroll to the target animatedly  please refer to  Shahil s answer

User · Answer

Way simpler   var element to scroll to   document getElementById  anchorName2       Or  var element to scroll to   document querySelectorAll   my-element-class   0      Or  var element to scroll to       my-element-class   0      Basically  element to scroll to  just have to be a reference    to any DOM element present on the page    Then  element to scroll to scrollIntoView

User · Answer

This works        scroll   on  click   function e       e preventDefault       var dest     this  attr  href          html  body   animate         scrollTop       dest  offset   top       2000          https   jsfiddle net 68pnkfgd   Just add the class  scroll  to any links you wish to animate

User · Answer

function scrollTo hash        location hash         hash      No jQuery required at all

User · Answer

x000D   x000D  jQuery  a href         click function    x000D      jQuery  html  body   animate   x000D          scrollTop  jQuery  jQuery this  attr  href     offset   top x000D         1000   x000D      return false  x000D      x000D   x000D   x000D

User · Answer

The solution from CSS-Tricks no longer works in jQuery 2 2 0  It will throw a selector error      JavaScript runtime error  Syntax error  unrecognized expression  a href     not  href        I fixed it by changing the selector   The full snippet is this     function          a href       not  href         click function         if  location pathname replace              this pathname replace            amp  amp  location hostname    this hostname        var target     this hash       target   target length   target       name     this hash slice 1             if  target length             html body   animate           scrollTop  target offset   top          1000         return false

User · Answer

a vue2 solution     add simple data property to simply force the update    const app   new Vue                updated  function                this  nextTick function                var uri   window location href            var anchor     uri indexOf          -1          uri split      1             if   String anchor  length  gt  0  amp  amp  this updater      page load                    this updater         only on page-load                 location href       String anchor                                                   app updater    page load       smooth scrolling in css - works in html5 only     html  body        scroll-behavior  smooth

User · Answer

document  ready - gt       a href         click - gt        document body  animate       scrollTop      this  attr  href    offset   top  1000

User · Answer

Great solution by jAndy  but the smooth scroll seems to be having issues working in firefox   Writing it this way works in Firefox as well    function            document  ready function                 html  body   animate               scrollTop         anchorName2   offset   top             2000              jQuery

User · Answer

the easiest way to to make the browser to scroll the page to a given anchor is to type in your style css   scroll-behavior  smooth   and in your html navigation use  NameOfTheSection  x000D   x000D    scroll-behavior  smooth   x000D   lt a href   scroll-to  gt Home lt a  gt    lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt   lt p gt other sections lt  p gt    lt section id  scroll-to  gt   lt p gt it will scroll down to this section lt  p gt   lt  section gt  x000D   x000D   x000D

User · Answer

You can use jQuerys  animate     offset   and scrollTop  Like    document body  animate        scrollTop         anchorName2   offset   top    2000     example link  http   jsbin com unasi3 edit  If you don t want to animate use  scrollTop   like    document body  scrollTop     anchorName2   offset   top     or javascripts native location hash like  location hash         anchorid

[javascript] How to scroll HTML page to given anchor?

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to scroll

Examples related to anchor