jQuery Scroll to Div

Question

I am making an FAQ page and have buttons across the top to jump to a category  it jumps to the p tag that I use as the category label  ex   lt p id  general  gt  for my general category   Instead of just jumping right to the category  I want to add a scroll effect   I want something like http   www dynamicdrive com dynamicindex3 scrolltop htm that scrolls to the desired part of my page   That link is a script that goes to the top of the page with a nice scrolling effect   I need something similar that will scroll to where I link to   For example  if I want to go to a misc  category  I want to just be able to have  lt a href   misc  gt Miscellaneous lt  a gt  and have it scroll to that section of the page

User · Accepted 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                            Check this link  http   css-tricks com snippets jquery smooth-scrolling  for a demo  I ve used it before and it works quite nicely

User · Answer

It is often required to move both body and html objects together      html body   animate      scrollTop      divToBeScrolledTo   offset   top       ShiftyThomas is right       divToBeScrolledTo   offset   top   10     10  pixels  reduces the margin    So to increase the margin use       divToBeScrolledTo   offset   top - 10    -10  pixels  would increase the margin between the top of your window and your element

User · Answer

if the link element is    lt a id  misc  href   misc  gt Miscellaneous lt  a gt    and the Miscellaneous category is bounded by something like    lt p id  miscCategory  name  misc  gt      lt  p gt    you can use jQuery to do the desired effect    lt script type  text javascript  gt        misc   click function             miscCategory   animate  scrollTop      miscCategory   offset   top           lt  script gt    as far as I remember it correctly    though  I haven t tested it and wrote it from memory

User · Answer

The script below is a generic solution that works for me  It is based on ideas pulled from this and other threads    When a link with an href attribute beginning with     is clicked  it scrolls the page smoothly to the indicated div  Where only the     is present  it scrolls smoothly to the top of the page      a href       click function        event preventDefault        var target     this  attr  href        if  target                  html  body   animate  scrollTop   0   600       else          html  body   animate           scrollTop    target  offset   top - 100        600         For example  When the code above is present  clicking a link with the tag  lt a href     gt  scrolls to the top of the page at speed 600  Clicking a link with the tag  lt a href   mydiv  gt  scrolls to 100px above  lt div id  mydiv  gt  at speed 600  Feel free to change these numbers    I hope it helps

User · Answer

I ran into the same  Saw an example using this  https   github com flesler jquery scrollTo  I use it as follows       arrow back   click function            scrollTo   features 1   1000    easing   easeInOutExpo   offset  0   axis    y             Clean solution  Works for me

User · Answer

You can also use  name  instead of  href  for a cleaner url          a name       click function        var target     this  attr  name        if  target                  html  body   animate  scrollTop   0   600       else          html  body   animate           scrollTop    target  offset   top - 100        600

User · Answer

Something like this would let you take over the click of each internal link and scroll to the position of the corresponding bookmark     function         a href       click function e       var name     this  attr  href   substr 1       var pos      a name   name      offset           body   animate   scrollTop  pos top         e preventDefault

User · Answer

Could just use JQuery position function to get coordinates of your div  then use javascript scroll   var position      div   position    scroll 0 position top

[jquery] jQuery Scroll to Div

Examples related to jquery

Examples related to html