Scroll to a div using jquery

Question

so I have a page that has a fixed link bar on the side   I d like to scroll to the different divs   Basically the page is just one long website  where I d like to scroll to different divs using the menu box to the side     Here is the jquery I have so far    document  ready function             contactlink   click   function               document  scrollTo   contact                The issue is it is automatically going to the contact div when it loads  then when I press the  contactlink in the menu it scrolls back to the top   EDIT  HTML    lt  DOCTYPE html gt    lt html lang  en  gt        lt head gt       lt meta charset  utf-8  gt        lt  -- jQuery-- gt       lt script src     lt  php echo base url     gt assets js jquery js  gt  lt  script gt        lt  --  js file-- gt       lt script src     lt  php echo base url     gt assets js pagetwo js  gt  lt  script gt        lt link rel  stylesheet  type  text css  href   lt  php echo base url    gt assets css reset css    gt            lt  --  css for page -- gt       lt link rel  stylesheet  type  text css  href   lt  php echo base url    gt assets css pagetwo css   gt                               lt  -- page title-- gt       lt title gt  lt  -- Insert Title -- gt  lt  title gt     lt  head gt   lt body gt       lt div id  container  gt            lt div id  sidebar  gt               lt ul gt                   lt li gt  lt a id    aboutlink  href     gt auck lt  a gt  lt  li gt                   lt li gt  lt a id    peojectslink  href     gt Projects lt  a gt  lt  li gt                   lt li gt  lt a id    resumelink  href     gt Resume lt  a gt  lt  li gt                   lt li gt  lt a id    contactlink  href     gt Contact lt  a gt  lt  li gt               lt  ul gt           lt  div gt            lt div id  content  gt               lt div class    id  about  gt                   lt p class  header  gt uck lt  p gt                   lt p class  info  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt               lt  div gt               lt div class  sections id  projects  gt                   lt p class    header  gt Projects lt  p gt                   lt p class  info  gt Projects lt  p gt               lt  div gt               lt div class  sections  id  resume  gt                   lt p class    header  gt Resume lt  p gt                   lt p class  info  gt Resume lt  p gt               lt  div gt               lt div class  sections  id  contacts  gt                   lt p class    header  gt Contact lt  p gt                   lt p class  info  gt Contact lt  p gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt      Thanks for the help

User · Answer

you can try         MediaPlayer   ready function           html  body   delay 2000  animate           scrollTop      MediaPlayer   offset   top         2000

User · Answer

Add this little function and use it as so     div   scrollTo 500    jQuery fn extend      scrollTo   function speed  easing          return this each function               var targetOffset     this  offset   top           html body   animate  scrollTop  targetOffset   speed  easing

User · Answer

There is no  scrollTo   method in jQuery  but there is a  scrollTop   one   scrollTop expects a parameter  that is  the pixel value where the scrollbar should scroll to   Example     window  scrollTop 200     will scroll the window  if there is enough content in it    So you can get this desired value with  offset   or  position      Example     window  scrollTop     contact   offset   top     This should scroll the  contact element into view   The non-jQuery alternate method is  scrollIntoView    You can call that method on any DOM element like       contact   0  scrollIntoView true     true indicates that the element is positioned at the top whereas false would place it on the bottom of the view  The nice thing with the jQuery method is  you can even use it with fx functions like  animate    So you might smooth scroll something   Reference   scrollTop     position     offset

User · Answer

First get the position of the div element upto which u want to scroll by jQuery position   method    Example   var pos      div   position      Then get the y cordinates  height  of that element with   top  method  Example   pos top   Then get the x cordinates of the that div element with   left  method   These methods are originated from CSS positioning   Once we get x  amp  y cordinates  then we can use javascript s scrollTo    method  This method scrolls the document upto specific height  amp  width  It takes two parameters as x  amp  y cordinates  Syntax    window scrollTo x y     Then just pass the x  amp  y cordinates of the DIV element in the scrollTo   function   Refer the example below  darr   darr    lt  DOCTYPE HTML gt       lt html gt       lt head gt           lt title gt              Scroll upto Div with jQuery           lt  title gt           lt script src  http   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt           lt script gt                document  ready function                          button1   click function                          var x       element   position      gets the position of the div element                        window scrollTo x left  x top     window scrollTo   scrolls the page upto certain position                           it takes 2 parameters    x axis cordinate  y axis cordinate                                                    lt  script gt       lt  head gt       lt body gt           lt button id  button1  gt              Click here to scroll          lt  button gt            lt div id  element  style  position absolute top 200  left 0  background-color orange height 100px width 200px   gt              The DIV element               lt  div gt           lt  body gt       lt  html gt

User · Answer

No need too these  Just simply add div id to href of a  lt  a   tag   lt li gt  lt a id    aboutlink  href   about  gt auck lt  a gt  lt  li gt    Just like that

User · Answer

OK guys  this is a small solution  but it works fine   suppose the following code    lt div id  the div holder  style  height  400px  overflow-y  scroll  gt     lt div class  post  gt 1st post lt  div gt     lt div class  post  gt 2nd post lt  div gt     lt div class  post  gt 3rd post lt  div gt   lt  div gt    you want when a new post is added to  the div holder  then it scrolls its inner content  the div s  post  to the last one like a chat  So  do the following whenever a new  post is added to the main div holder   var scroll   function div        var totalHeight   0      div find   post   each function           totalHeight      this  outerHeight                div scrollTop totalHeight            call it    scroll     the div holder

User · Answer

First  your code does not contain a contact div  it has a contacts div    In sidebar you have contact in the div at the bottom of the page you have contacts  I removed the final s for the code sample   you also misspelled the projectslink id in the sidebar     Second  take a look at some of the examples for click on the jQuery reference page  You have to use click like  object click  function        Your code here      in order to bind a click event handler to the object     Like in my example below  As an aside  you can also just trigger a click on an object by using it without arguments  like object click     Third  scrollTo is a plugin in jQuery  I don t know if you have the plugin installed  You can t use scrollTo   without the plugin  In this case  the functionality you desire is only 2 lines of code  so I see no reason to use the plugin   Ok  now on to a solution   The code below will scroll to the correct div if you click a link in the sidebar  The window does have to be big enough to allow scrolling      This is a functions that scrolls to   blah link function goToByScroll id           Remove  link  from the ID     id   id replace  link               Scroll        html body   animate           scrollTop          id  offset   top         slow           sidebar  gt  ul  gt  li  gt  a   click function e           Prevent a page reload when a link is pressed     e preventDefault           Call the scroll function     goToByScroll this id         Live Example    Scroll to function taken from here      PS  Obviously you should have a compelling reason to go this route instead of using anchor tags  lt a href   gohere  gt blah lt  a gt       lt a name  gohere  gt blah title lt  a gt

[jquery] Scroll to a div using jquery

Examples related to jquery

Examples related to scroll