Smooth scrolling when clicking an anchor link

Question

I have a couple of hyperlinks on my page  A FAQ that users will read when they visit my help section   Using Anchor links  I can make the page scroll towards the anchor and guide the users there   Is there a way to make that scrolling smooth   But notice that he s using a custom JavaScript library  Maybe jQuery offers somethings like this baked in

User · Answer

There is a css way of doing this using scroll-behavior. Add the following property.

    scroll-behavior: smooth;

And that is it. No JS required.

_x000D_

a {_x000D_
  display: inline-block;_x000D_
  width: 50px;_x000D_
  text-decoration: none;_x000D_
}_x000D_
nav, scroll-container {_x000D_
  display: block;_x000D_
  margin: 0 auto;_x000D_
  text-align: center;_x000D_
}_x000D_
nav {_x000D_
  width: 339px;_x000D_
  padding: 5px;_x000D_
  border: 1px solid black;_x000D_
}_x000D_
scroll-container {_x000D_
  display: block;_x000D_
  width: 350px;_x000D_
  height: 200px;_x000D_
  overflow-y: scroll;_x000D_
  scroll-behavior: smooth;_x000D_
}_x000D_
scroll-page {_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  justify-content: center;_x000D_
  height: 100%;_x000D_
  font-size: 5em;_x000D_
}

_x000D_

<nav>_x000D_
  <a href="#page-1">1</a>_x000D_
  <a href="#page-2">2</a>_x000D_
  <a href="#page-3">3</a>_x000D_
</nav>_x000D_
<scroll-container>_x000D_
  <scroll-page id="page-1">1</scroll-page>_x000D_
  <scroll-page id="page-2">2</scroll-page>_x000D_
  <scroll-page id="page-3">3</scroll-page>_x000D_
</scroll-container>

_x000D_

PS: please check the browser compatibility.

User · Answer

Adding this   function          window location hash   href      is somehow nullifying the vertical offset  top - 72   in Firefox and IE  ut not in Chrome  Basically  the page scrolls smoothly to the point at which it should stop based upon the offset  but then jumps down to where the page would go without the offset   It does add the hash to the end of the url  but pressing back does not take you back to the top  it just removes the hash from the url and leaves the viewing window where it sits   Here is the full js I am using   var  root      html  body       a   click function         var href     attr this   href         root animate           scrollTop    href  offset   top - 120        500  function              window location hash   href              return false

User · Answer

HTML   lt a href   target  class  smooth-scroll  gt      Link  lt  a gt   lt div id  target  gt  lt  div gt    or With absolute Full URL   lt a href  https   somewebsite com  target  class  smooth-scroll  gt      Link  lt  a gt   lt div id  target  gt  lt  div gt    jQuery   j function          j  a smooth-scroll   click function             if                   window location pathname replace               this pathname replace                         amp  amp   window location hostname    this hostname                         var target    j this hash               target   target length   target    j   name     this hash slice 1                      if  target length                     j  html body   animate                       scrollTop  target offset   top - 70                    1000                   return false

User · Answer

This solution will also work for the following URLs  without breaking anchor links to different pages   http   www example com dir index html http   www example com dir index html anchor    index html   index html anchor   etc   var  root      html  body       a   on  click   function event       var hash   this hash         Is the anchor on the same page      if  hash  amp  amp  this href slice 0  -hash length-1     location href slice 0  -location hash length-1              root animate               scrollTop    hash  offset   top             normal   function                 location hash   hash                      return false              I haven t tested this in all browsers  yet

User · Answer

There are already a lot of good answers here - however they are all missing the fact that empty anchors have to be excluded  Otherwise those scripts generate JavaScript errors as soon as an empty anchor is clicked   In my opinion the correct answer is like this      a href       not  href          click function         event preventDefault            html  body   animate           scrollTop      attr this   href    offset   top        500

User · Answer

I suggest you to make this generic code        a href         click function     var the id     this  attr  href            html  body   animate           scrollTop   the id  offset   top         slow     return false       You can see a very good article here   jquery-effet-smooth-scroll-defilement-fluide

User · Answer

The correct syntax is     Smooth scrolling with links    a href         on  click   function event            event preventDefault           html body   animate  scrollTop   this hash  offset   top   500           Smooth scrolling when the document is loaded and ready   document  ready function         html body   animate  scrollTop   location hash  offset     top   500         Simplifying  DRY  function smoothScrollingTo target        html body   animate  scrollTop   target  offset    top   500        a href         on  click   function event            event preventDefault        smoothScrollingTo this hash         document  ready function      smoothScrollingTo location hash         Explanation of href           means it matches what contains   char  Thus only match anchors  For more about the meaning of this  see here    is because the   is a special char in css selector  so we have to escape it

User · Answer

I did this for both   xxxxx asdf  and   asdf  href anchors     a href       on  click   function event       var href     this  attr  href        if           test href           var hash   href match          0         var path   href match            0          if  window location pathname    path    path length    0           event preventDefault               html body   animate  scrollTop   this hash  offset   top   1000           window location hash   hash

User · Answer

a href       click function event          html  body   animate           scrollTop       attr this   href     offset   top        500       event preventDefault          this worked perfect for me

User · Answer

The answer given works but disables outgoing links  Below a version with an added bonus ease out  swing  and respects outgoing links     document  ready function             a href         on  click   function  e            e preventDefault             var target   this hash          var  target     target               html  body   stop   animate                scrollTop    target offset   top            900   swing   function                  window location hash   target

User · Answer

Only CSS html       scroll-behavior  smooth  important     All you need to add only this  Now your internal links scrolling behavior will be smooth like a stream-flow  Programmatically  Something extra and advanced    Scroll to specific values    scrollTo is the same window scroll     top  1000     left  0     behavior   smooth          Scroll certain amounts from current position  window scrollBy      top  250     could be negative value   left  0     behavior   smooth           Scroll to a certain element document getElementById  el   scrollIntoView     behavior   smooth      Note  All latest browsers  Opera  Chrome  Firefox etc  supports this feature  for detail understanding  read this article

User · Answer

This will make it easy to allow jQuery to discern your target hash and know when and where to stop      a href         click function e        e preventDefault        var target   this hash       target     target           html  body   stop   animate            scrollTop    target offset   top        900   swing   function              window location hash   target

User · Answer

The new hotness in CSS3  This is a lot easier than every method listed on this page and requires no Javascript  Just enter the below code into you css and all of a sudden links point to locations inside you own page will have a smooth scrolling animation   html scroll-behavior smooth    After that any links pointed towards a div will smoothly glide over to those sections    lt a href   section  gt Section1 lt  a gt    Edit  For those confused about the above a tag  Basically it s a link that s clickable  You can then have another div tag somewhere in your web page like    lt div classname  section  gt content lt  div gt    In this regard the a link will be clickable and will go to whatever  section is  in this case it s our div we called section    BTW  I spent hours trying to get this to work  Found the solution in some obscure comments section  It was buggy and wouldn t work in some tags  Didn t work in the body  It finally worked when I put it in html   in the CSS file

User · Answer

thanks for sharing  Joseph Silber  Here your 2018 solution as ES6 with a minor change to keep the standard behavior  scroll to top    document querySelectorAll  a href           forEach  anchor    gt      anchor addEventListener  click   function  ev        ev preventDefault         const targetElement   document querySelector this getAttribute  href         targetElement scrollIntoView         block   start         alignToTop  true        behavior   smooth

User · Answer

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                            Official  http   css-tricks com snippets jquery smooth-scrolling

User · Answer

Update April 2018  There s now a native way to do this   document querySelectorAll  a href         forEach anchor   gt        anchor addEventListener  click   function  e            e preventDefault             document querySelector this getAttribute  href    scrollIntoView               behavior   smooth                            This is currently only supported in the most bleeding edge browsers     For older browser support  you can use this jQuery technique     document  on  click    a href         function  event        event preventDefault            html  body   animate           scrollTop      attr this   href    offset   top        500         And here s the fiddle  http   jsfiddle net 9SDLw     If your target element does not have an ID  and you re linking to it by its name  use this      a href         click function             html  body   animate           scrollTop      name        attr this   href   substr 1          offset   top        500        return false          For increased performance  you should cache that    html  body   selector  so that it doesn t run every single time an anchor is clicked   var  root      html  body        a href         click function           root animate           scrollTop       attr this   href     offset   top        500        return false          If you want the URL to be updated  do it within the animate callback   var  root      html  body        a href         click function         var href     attr this   href          root animate           scrollTop    href  offset   top        500  function              window location hash   href               return false

User · Answer

Using JQuery      a href       click function         html  body   animate       scrollTop       attr this   href     offset   top      500     return false

User · Answer

If you have a simple button on the page to scroll down to a div and want the back button to work by jumping to top  just add this code     window  on  hashchange   function event        if  event target location hash                window scrollTo 0 0               This could be extended to jump to different divs too  by reading the hash value  and scrolling like Joseph Silbers answer

User · Answer

Modern browsers are a little faster these days  A setInterval might work  This function work well in Chrome and Firefox these days  A little slow in safari  didn t bother with IE   function smoothScroll event        if  event target hash             Check if tag is an anchor         event preventDefault           const hash   event target hash replace                  const link   document getElementsByName hash             Find the where you want to scroll         const position   link 0  getBoundingClientRect   y          let top   0          let smooth   setInterval      gt                let leftover   position - top             if  top     position                    clearInterval smooth                             else if position  gt  top  amp  amp  leftover  lt  10                    top    leftover                 window scrollTo 0  top                             else if position  gt   top - 10                     top    10                 window scrollTo 0  top                            6   6 milliseconds is the faster chrome runs setInterval

User · Answer

Well  the solution depends on the type of problem  I use the javascript animate method for the button click  and I use codes from bellow links for the navbar https   css-tricks com snippets jquery smooth-scrolling    document  ready function           quot  js--scroll-to-plans quot   click function             quot body html quot   animate                  scrollTop     quot  js--section-plans quot   offset   top                 1000            return false              quot  js--scroll-to-start quot   click function             quot body html quot   animate                  scrollTop     quot  js--section-features quot   offset   top                 1000            return false              a href   quot   quot          Remove links that don t actually link to anything    not   href  quot   quot        not   href  quot  0 quot        click function event           On-page links     if         location pathname replace               this pathname replace                    amp  amp         location hostname    this hostname                  Figure out element to scroll to       var target     this hash         target   target length   target       name     this hash slice 1                   Does a scroll target exist        if  target length               Only prevent default if animation is actually gonna happen         event preventDefault               html  body   animate             scrollTop  target offset   top            1000  function                  Callback after animation              Must change focus            var  target     target              target focus              if   target is  quot  focus quot         Checking if the target was focused             return false              else                target attr  tabindex   -1       Adding tabindex for elements not focusable              target focus       Set focus again

User · Answer

Never forget that offset   function is giving your element s position to document  So when you need scroll your element relative to its parent you should use this           a-parent-div   find  a   click function event           event preventDefault                scroll-div   animate        scrollTop       attr this   href     position   top       scroll-div   scrollTop           500                  The key point is getting scrollTop of scroll-div and add it to scrollTop  If you won t do that position   function always gives you different position values

User · Answer

Requires jquery and animates to anchor tag with the specified name instead of id  while adding the hash to browser url  Also fixes an error in most answers with jquery where the   sign is not prefixed with an escaping backslash  The back button  unfortunately  does not navigate back properly to previous hash links        a href         click function  event        let hashValue     this  attr  href        let name   hashValue substring 1       let target       name      name                 html  body   animate   scrollTop  target offset   top    500       event preventDefault        history pushState null  null  hashValue

User · Answer

Tested and Verified Code      lt script gt  jQuery document  ready function       Add smooth scrolling to all links jQuery  a   on  click   function event        Make sure this hash has a value before overriding default behavior if  this hash                Prevent default anchor click behavior   event preventDefault          Store hash   var hash   this hash        Using jQuery s animate   method to add smooth page scroll      The optional number  800  specifies the number of milliseconds it takes to scroll to the specified area   jQuery  html  body   animate       scrollTop  jQuery hash  offset   top      800  function            Add hash     to URL when done scrolling  default click behavior      window location hash   hash             End if          lt  script gt

User · Answer

You can use window scroll   with behavior  smooth and top set to the anchor tag s offset top which ensures that the anchor tag will be at the top of the viewport   document querySelectorAll  a href         forEach a   gt        a addEventListener  click   function  e            e preventDefault            var href   this getAttribute  href            var elem   document querySelector href   document querySelector  a name   href substring 1  href length                  gets Element with an id of the link s href            or an anchor tag with a name attribute of the href of the link without the           window scroll               top  elem offsetTop               left  0               behavior   smooth                         if you want to add the hash to window location hash           you will need to use setTimeout to prevent losing the smooth scrolling behavior          the following code will work for that purpose          setTimeout function                window location hash   this hash             2000                    Demo    x000D   x000D  a  a visited  x000D    color  blue  x000D    x000D   x000D  section  x000D    margin  500px 0px   x000D    text-align  center  x000D    x000D   lt a href   section1  gt Section 1 lt  a gt  x000D   lt br  gt  x000D   lt a href   section2  gt Section 2 lt  a gt  x000D   lt br  gt  x000D   lt a href   section3  gt Section 3 lt  a gt  x000D   lt br  gt  x000D   lt a href   section4  gt Section 4 lt  a gt  x000D   lt section id  section1  gt  x000D   lt b style  font-size  2em   gt Section 1 lt  b gt  x000D   lt p gt Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt p  gt  x000D   lt section gt  x000D   lt section id  section2  gt  x000D   lt b style  font-size  2em   gt Section 2 lt  b gt  x000D   lt p gt Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   lt section gt  x000D   lt section id  section3  gt  x000D   lt b style  font-size  2em   gt Section 3 lt  b gt  x000D   lt p gt  x000D  Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   lt section gt  x000D   lt a style  margin  500px 0px  color  initial   name  section4  gt  x000D   lt b style  font-size  2em   gt Section 4  lt i gt  this is an anchor tag  not a section  lt  i gt  lt  b gt  x000D   lt  a gt  x000D   lt p gt  x000D  Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   lt script gt  x000D  document querySelectorAll  a href         forEach a   gt    x000D          a addEventListener  click   function  e    x000D              e preventDefault    x000D              var href   this getAttribute  href    x000D              var elem   document querySelector href   document querySelector  a name   href substring 1  href length        x000D              window scroll   x000D                  top  elem offsetTop   x000D                  left  0   x000D                  behavior   smooth   x000D                  x000D              x000D          x000D   lt  script gt  x000D   x000D   x000D    You can just set the CSS property scroll-behavior to smooth  which most modern browsers support  which obviates the need for Javascript    x000D   x000D  html  body  x000D    scroll-behavior  smooth  x000D    x000D  a  a visited  x000D    color  blue  x000D    x000D   x000D  section  x000D    margin  500px 0px   x000D    text-align  center  x000D    x000D   lt a href   section1  gt Section 1 lt  a gt  x000D   lt br  gt  x000D   lt a href   section2  gt Section 2 lt  a gt  x000D   lt br  gt  x000D   lt a href   section3  gt Section 3 lt  a gt  x000D   lt br  gt  x000D   lt a href   section4  gt Section 4 lt  a gt  x000D   lt section id  section1  gt  x000D   lt b style  font-size  2em   gt Section 1 lt  b gt  x000D   lt p gt Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt p  gt  x000D   lt section gt  x000D   lt section id  section2  gt  x000D   lt b style  font-size  2em   gt Section 2 lt  b gt  x000D   lt p gt Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   lt section gt  x000D   lt section id  section3  gt  x000D   lt b style  font-size  2em   gt Section 3 lt  b gt  x000D   lt p gt  x000D  Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   lt section gt  x000D   lt a style  margin  500px 0px  color  initial   name  section4  gt  x000D   lt b style  font-size  2em   gt Section 4  lt i gt  this is an anchor tag  not a section  lt  i gt  lt  b gt  x000D   lt  a gt  x000D   lt p gt  x000D  Lorem ipsum dolor sit amet  et vis laudem utroque  iusto forensibus neglegentur eu duo  Eu pro fuisset salutandi philosophia  discere persecuti qui te  Eos ad quodsi dissentias  ei odio viris signiferumque mei  Putent iuvaret perpetua nec eu  Has no ornatus vivendum  Adhuc nonumes ex vim  in suas rebum graecis mei  usu ad causae recusabo  Idque vituperata vel ea  x000D   x000D  Veri verterem pro ex  Ad error omnes est  id sit lorem legendos  Eos vidit ullum ne  tale tantas omittam est ut  Nobis maiorum efficiendi eu mei  Eos et debet placerat signiferumque  Per eu propriae electram  x000D   x000D  Impetus percipit menandri te ius  mea ne stet posse fabellas  Aliquid corrumpit vel no  mei in diam praesent contentiones  Qui veniam suscipit probatus ex  No autem homero perfecto quo  eos choro facilis ut  Te quo cibo interesset  Vel verear praesent in  menandri deserunt ad his  x000D   x000D  Labore admodum consetetur has et  Possit facilisi eu sed  lorem iriure eum id  pri ei consul necessitatibus  Est te iusto epicuri  Vis no graece putent mentitum  rebum facete offendit nec in  In duis vivendo sed  vel id enim voluptatibus  Velit sanctus ne mel  quem sumo suavitate mel cu  mea ea nullam feugiat  x000D   x000D  Tincidunt suscipiantur no pro  Vel ut novum mucius molestie  ut tale ipsum intellegebat mei  mazim accumsan voluptaria ea nam  Posidonium theophrastus ut sea  stet viris hendrerit pro ex  sonet mentitum ne quo  Vim duis feugiat ex  nec eu probo doming persecuti  Velit zril nam in  est commodo splendide id  Et aperiri fuisset iracundia usu  Eu nec iusto audire repudiare  lt  p gt  x000D   x000D   x000D

User · Answer

I m surprised no one has posted a native solution that also takes care of updating the browser location hash to match  Here it is   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                  See tutorial  http   www javascriptkit com javatutors scrolling-html-bookmark-javascript shtml  For sites with sticky headers  scroll-padding-top CSS can be used to provide an offset

User · Answer

Here is the solution I implemented for multiple links and anchors  for a smooth scroll   http   www adriantomic se development jquery-localscroll-tutorial  if you have your navigation links set up in a navigation div and declared with this structure     lt a href     destinationA  gt    and your corresponding anchor tag destinations as so    lt a id    destinationA  gt    Then just load this into the head of the document        lt  -- Load jQuery -- gt   lt script src  http   ajax googleapis com ajax libs jquery 1 5 1 jquery min js  gt  lt  script gt    lt  -- Load ScrollTo -- gt   lt script src  http   flesler-plugins googlecode com files jquery scrollTo-1 4 2-min js  gt  lt  script gt    lt  -- Load LocalScroll -- gt   lt script src  http   flesler-plugins googlecode com files jquery localscroll-1 2 7-min js  gt  lt  script gt    lt script type    text javascript  gt     document  ready function                    Scroll the whole document             menuBox   localScroll              target   content                       lt  script gt    Thanks to  Adriantomic

User · Answer

There is native support for smooth scrolling on hash id scrolls   html     scroll-behavior  smooth      You can take a look  https   www w3schools com howto howto css smooth scroll asp section2

User · Answer

a   on  click   function event         check the value of this hash     if this hash                  event preventDefault                html  body   animate  scrollTop   this hash  offset   top   500              add hash to the current scroll position         window location hash   this hash

[javascript] Smooth scrolling when clicking an anchor link

Examples related to javascript

Examples related to jquery

Examples related to scroll

Examples related to hyperlink

Examples related to anchor