jquery smooth scroll to an anchor

Question

Is there a way to scroll down to an anchor link using jQuery   Like      document  ready function          gotomyanchor   click function            scrollSmoothTo     myanchor

User · Answer

I used in my site this     document  ready function       a href         on  click  function  e        e preventDefault         var target   this hash       target     target           html  body   stop   animate            scrollTop    target offset   top        1200   swing   function              window location hash   target                     You could change the speed of the scrolling changing the  1200  i used by default  it works fairly well on most of the browsers    after putting the code between the  lt head gt   lt  head gt  tag of your page  you will need to create the internal link in your  lt body gt  tag     lt a href   home  gt Go to Home lt  a gt    Hope it helps   Ps  Dont forget to call    lt script src  http   ajax googleapis com ajax libs jquery 1 8 jquery min js  gt  lt  script gt

User · Answer

Here s the code I used to quickly bind jQuery scrollTo to all anchor links      Smooth scroll    a href       click function          var hash     this  attr  href        hash   hash slice hash indexOf        1         scrollTo hash     top    0    a name   hash      500       window location hash         hash      return false

User · Answer

I would use the simple code snippet from CSS-Tricks com     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                            Source  http   css-tricks com snippets jquery smooth-scrolling

User · Answer

I hate adding function-named classes to my code  so I put this together instead  If I were to stop using smooth scrolling  I d feel behooved to go through my code  and delete all the class  scroll  stuff  Using this technique  I can comment out 5 lines of JS  and the entire site updates       lt a href   about  gt Smooth lt  a gt  lt  -- will never trigger the function -- gt   lt a href   contact  gt Smooth lt  a gt  lt  -- but he will -- gt           lt div id  contact  gt     lt  div gt     lt script src  jquery js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt         Smooth scrolling to element IDs        a href     not  href       on  click   function              var element       this  attr  href                html body   animate   scrollTop  element offset   top    normal    swing            return false           lt  script gt    Requirements  1   lt a gt  elements must have an href attribute that begin with   and be more than just   2  An element on the page with a matching id attribute  What it does  1  The function uses the href value to create the anchorID object     nbsp  nbsp  nbsp - In the example  it s     contact     about starts with   2  HTML  and BODY are animated to the top offset of anchorID     nbsp  nbsp  nbsp - speed    normal    fast   slow   milliseconds        nbsp  nbsp  nbsp - easing    swing    linear  etc     google easing  3  return false -- it prevents the browser from showing the hash in the URL     nbsp  nbsp  nbsp - the script works without it  but it s not as  smooth

User · Answer

works     a href       each function            this  attr  href     this  attr  href   replace                    this  on   click   function              var hashname     this  attr  href   replace                     if   this  attr  href                             html  body   animate   scrollTop  0    300                     else               var target      a name      hashname             hashname                   targetOffset   target offset   top              if targetOffset  gt   1                       html  body   animate   scrollTop  targetOffset-60    300

User · Answer

Best solution I have seen so far  jQuery  Smooth Scrolling Internal Anchor Links  HTML    lt a href   comments  class  scroll  gt Scroll to comments lt  a gt    Script   jQuery document  ready function              scroll   click function event                event preventDefault               html body   animate  scrollTop   this hash  offset   top   500

User · Answer

I wanted a version that worked for  lt a href   my-id  gt  and  lt a href   page my-id  gt    lt script gt                 a href     not  href       on  click   function  event            event preventDefault            var element     this hash              html body   animate   scrollTop  element offset   top    normal    swing             lt  script gt

User · Answer

I used the plugin Smooth Scroll  at http   plugins jquery com smooth-scroll   With this plugin all you need to include is a link to jQuery and to the plugin code    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  javascript smoothscroll js  gt  lt  script gt     the links need to have the class smoothScroll to work    Another feature of Smooth Scroll is that the ancor name is not displayed in the URL

User · Answer

Try this one  It is a code from CSS tricks that I modified  it is pretty straight forward and does both horizontal and vertial scrolling  Needs JQuery  Here is a demo    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-10  scrollLeft target offset   left-10            1000           return false

User · Answer

Here is how I do it       var hashTagActive               scroll   on  click touchstart    function  event            if hashTagActive    this hash      this will prevent if the user click several times the same link to freeze the scroll              event preventDefault                  calculate destination place             var dest   0              if    this hash  offset   top  gt    document  height   -   window  height                      dest     document  height   -   window  height                  else                   dest     this hash  offset   top                              go to destination                html body   animate                   scrollTop  dest                2000   swing                hashTagActive   this hash                      Then you just need to create your anchor like this    lt a class  scroll  href   destination1  gt Destination 1 lt  a gt    You can see it on my website  A demo is also available here  http   jsfiddle net YtJcL

User · Answer

Using hanoo s script I created a jQuery function     fn scrollIntoView   function duration  easing        var dest   0      if  this offset   top  gt    document  height   -   window  height              dest     document  height   -   window  height          else           dest   this offset   top               html body   animate           scrollTop  dest        duration  easing       return this       usage       myelement   scrollIntoView      Defaults for duration and easing are 400ms and  swing

User · Answer

jQuery scrollTo will do everything you want and more   You can pass it all kinds of different things    A raw number A string  44    100px      30px   etc   A DOM element  logically  child of the scrollable element  A selector  that will be relative to the scrollable element The string  max  to scroll to the end  A string specifying a percentage to scroll to that part of the container  f e  50  goes to    to the middle   A hash   top x  left y    x and y can be any kind of number string like above

[javascript] jquery smooth scroll to an anchor?

Examples related to javascript

Examples related to jquery