How to add smooth scrolling to Bootstrap s scroll spy function

Question

I ve been trying to add a smooth scrolling function to my site for a while now but can t seem to get it to work     Here is my HTML code relating to my navigation    lt div id  nav-wrapper  gt   lt div id  nav  class  navbar navbar-inverse affix-top  data-spy  affix  data-offset-top  675  gt     lt div class  navbar-inner  data-spy  affix-top  gt       lt div class  container  gt          lt  --  btn-navbar is used as the toggle for collapsed navbar content -- gt         lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  a gt          lt  -- Everything you want hidden at 940px or less  place within here -- gt         lt div class  nav-collapse collapse  gt           lt ul class  nav  gt               lt li gt  lt a href   home  gt Home lt  a gt  lt  li gt               lt li gt  lt a href   service-top  gt Services lt  a gt  lt  li gt               lt li gt  lt a href   contact-arrow  gt Contact lt  a gt  lt  li gt           lt  ul gt  lt  --  nav-- gt         lt  div gt  lt  --  nav-collapse collapse pull-right-- gt       lt  div gt  lt  --  container-- gt     lt  div gt  lt  --  navbar-inner-- gt   lt  div gt  lt  --  nav   navbar navbar-inverse-- gt   lt  div gt  lt  --  nav-wrapper-- gt    Here is the JS code I ve added    lt script src  js jquery scrollTo-1 4 3 1-min js  gt  lt  script gt    lt script gt        document  ready function e                 nav   scrollSpy               nav ul li a   bind  click   function e                e preventDefault                target   this hash              console log target                 scrollTo target  1000                        lt  script gt    For what it s worth  here is where I received info on what I ve done so far  and here is my site in it s current form   If you can help me I ll bake you a pie or cookies or something   Thanks

User · Answer

YOUR-BUTTON   on  click   function e       e preventDefault          html  body   animate           scrollTop      YOUR-TARGET   offset   top         300

User · Answer

If you download the jquery easing plugin  check it out  then you just have to add this to your main js file      a smooth-scroll   on  click   function event        var  anchor     this          html  body   stop   animate           scrollTop     anchor attr  href    offset   top   20        1500   easeInOutExpo        event preventDefault          and also dont forget to add the smooth-scroll class to your a tags like this      lt li gt  lt a href   about  class  smooth-scroll  gt About Us lt  a gt  lt  li gt

User · Answer

styles css html       scroll-behavior  smooth     Source  https   www w3schools com howto howto css smooth scroll asp section2

User · Answer

with this code  the id will not appear on the link     document querySelectorAll  a href   quot   quot     forEach anchor   gt            anchor addEventListener  click   function  e                e preventDefault                 document querySelector this getAttribute  href    scrollIntoView                   behavior   smooth

User · Answer

I combined it  and this is the results -     document  ready function              toTop   hide                    fade in  amp  out          window  scroll function                          if    this  scrollTop    gt  400                                toTop   fadeIn                          else                               toTop   fadeOut                                                        a href       each function         if  location pathname replace              this pathname replace                amp  amp  location hostname    this hostname      amp  amp  this hash replace                   var  targetId     this hash    targetAnchor       name     this hash slice 1               var  target    targetId length    targetId    targetAnchor length    targetAnchor   false         if   target             var targetOffset    target offset   top             this  click function                   html  body   animate  scrollTop  targetOffset   400              return false                                         I tested it and it works fine  hope this will help someone

User · Answer

Do you really need that plugin  You can just animate the scrollTop property       nav ul li a href         on  click   function e           prevent default anchor click behavior    e preventDefault           store hash    var hash   this hash         animate       html  body   animate          scrollTop    hash  offset   top         300  function               when done  add hash to url            default click behaviour         window location hash   hash                  fiddle

User · Answer

What onetrickpony posted is okay  but if you want to have a more general solution  you can just use the code below   Instead of selecting just the id of the anchor  you can make it bit more standard-like and just selecting the attribute name of the  lt a gt -Tag  This will save you from writing an extra id tag  Just add the smoothscroll class to the navbar element   What changed  1      nav ul li a href         to     nav smoothscroll ul li a href          2    this hash  to    a name      this hash replace                   Final Code     Enable smooth scrolling on all links with anchors        nav smoothscroll ul li a href         on  click   function e          prevent default anchor click behavior   e preventDefault          store hash   var hash   this hash        animate      html  body   animate       scrollTop     a name      this hash replace                  offset   top      300  function            when done  add hash to url         default click behaviour      window location hash   hash

User · Answer

If you have a fixed navbar  you ll need something like this    Taking from the best of the above answers and comments         bs-js-navbar-scrollspy li a href         on  click   function event      var target   this hash     event preventDefault       var navOffset       navbar   height       return    html  body   animate       scrollTop    this hash  offset   top - navOffset      300  function         return window history pushState null  null  target               First  in order to prevent the  undefined  error  store the hash to a variable  target  before calling preventDefault    and later reference that stored value instead  as mentioned by pupadupa   Next  You cannot use window location hash   target because it sets the url and the location simultaneously rather than separately  You will end up having the location at the beginning of the element whose id matches the href    but covered by your fixed top navbar   In order to get around this  you set your scrollTop value to the vertical scroll location value of the target minus the height of your fixed navbar  Directly targeting that value maintains smooth scrolling  instead of adding an adjustment afterwards  and getting unprofessional-looking jitters   You will notice the url doesn t change  To set this  use return window history pushState null  null  target   instead  to manually add the url to the history stack   Done   Other notes    1  using the  on method is the latest  as of Jan 2015  jquery method that is better than  bind or  live  or even  click for reasons I ll leave to you to find out   2  the navOffset value can be within the function or outside  but you will probably want it outside  as you may very well reference that vertical space for other functions   DOM manipulations  But I left it inside to make it neatly into one function

[javascript] How to add smooth scrolling to Bootstrap's scroll spy function

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to smooth-scrolling