How can I scroll to a specific location on the page using jquery

Question

Is it possible to scroll to a specific location on the page using jQuery   Does the location I want to scroll to have to have    lt a name   123  gt here lt  a gt    Or can it just move to a specific DOM id

User · Answer

Yep  even in plain JavaScript it s pretty easy  You give an element an id and then you can use that as a  bookmark     lt div id  here  gt here lt  div gt    If you want it to scroll there when a user clicks a link  you can just use the tried-and-true method    lt a href   here  gt scroll to over there lt  a gt    To do it programmatically  use scrollIntoView    document getElementById  here   scrollIntoView

User · Answer

Here s a pure javascript version   location hash     123     It ll scroll automatically  Remember to add the     prefix

User · Answer

jQuery Scroll Plugin  since this is a question tagged with jquery i have to say  that this library has a very nice plugin for smooth scrolling  you can find it here  http   plugins jquery com scrollTo   Excerpts from Documentation      div pane   scrollTo        all divs w class pane   or     scrollTo        the plugin will take care of this   Custom jQuery function for scrolling  you can use a very lightweight approach by defining your custom scroll jquery function    fn scrollView   function          return this each function                 html  body   animate               scrollTop    this  offset   top            1000               and use it like       your-div   scrollView      Scroll to a page coordinates  Animate html and body elements with scrollTop or scrollLeft attributes     html  body   animate       scrollTop  0      scrollLeft  300    1000     Plain javascript  scrolling with window scroll  window scroll horizontalOffset  verticalOffset     only to sum up  use the window location hash to jump to element with ID  window location hash     your-page-element     Directly in HTML  accesibility enhancements    lt a href   your-page-element  gt Jump to ID lt  a gt    lt div id  your-page-element  gt      will jump here  lt  div gt

User · Answer

You can use scroll-behavior  smooth  to get this done without Javascript  https   developer mozilla org en-US docs Web CSS scroll-behavior

User · Answer

Using jquery easing min js  With fixed IE console Errors  Html   lt a class  page-scroll  href   features  gt Features lt  a gt   lt section id  features  class  features-section  gt Features Section lt  section gt             lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt           lt script src  js jquery js  gt  lt  script gt           lt  -- Include all compiled plugins  below   or include individual files as needed -- gt           lt script src  js bootstrap min js  gt  lt  script gt            lt  -- Scrolling Nav JavaScript -- gt           lt script src  js jquery easing min js  gt  lt  script gt    Jquery    jQuery to collapse the navbar on scroll  you can use this code with in external file with name scrolling-nav js           window  scroll function                  if      navbar   offset   top  gt  50                        navbar-fixed-top   addClass  top-nav-collapse                  else                       navbar-fixed-top   removeClass  top-nav-collapse                                        jQuery for page scrolling feature - requires jQuery Easing plugin           function                     a page-scroll   bind  click   function  event                    var anchor     this                   if    anchor  length  gt  0                        var href     anchor  attr  href                        if    href substring href indexOf        length  gt  0                               html  body   stop   animate                               scrollTop    href substring href indexOf        offset   top                            1500   easeInOutExpo                                              else                           window location   href                                                          event preventDefault

User · Answer

lt script type  text javascript  gt        document  ready function                scroll-element   click function                   html body   animate                   scrollTop      our companies   offset   top                1000                return false                      lt  script gt

User · Answer

Plain Javascript   window location     elementId

User · Answer

There is no need to use any plugin  you can do it like this   var divPosition       divId   offset      then use this to scroll document to specific DOM      html  body   animate  scrollTop  divPosition top    slow

User · Answer

Try this   lt div id  divRegister  gt  lt  div gt     document  ready function     location hash    divRegister

User · Answer

lt div id  idVal  gt       lt  --div content goes here-- gt   lt  div gt       lt script type  text javascript  gt         document  ready function             var divLoc       idVal   offset                html  body   animate  scrollTop  divLoc top    slow              lt  script gt    This example shows to locate to a particular div id i e   idVal  in this case  If you have subsequent divs tables that will open up in this page via ajax  then you can assign unique divs and call the script to scroll to the particular location for each contents of divs   Hope this will be useful

User · Answer

Here is variant of  juraj-blahunka s lightweight approach  This function does not assume the container is the document and only scrolls if the item is out of view  Animation queuing is also disabled to avoid unnecessary bouncing     fn scrollToView   function          return   each this  function              if    this  position   top  lt  0                  this  position   top     this  height    gt    this  parent   height                    this  parent   animate                   scrollTop    this  parent   scrollTop       this  position   top                                  duration  300                  queue  false

[jquery] How can I scroll to a specific location on the page using jquery?

Examples related to jquery

Examples related to scroll

Examples related to scrollto

Examples related to jquery-scrollable