135

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:

<a name="#123">here</a>

Or can it just move to a specific DOM id?

Juraj Blahunka
  • 17,913
  • 6
  • 34
  • 52
mrblah
  • 99,669
  • 140
  • 310
  • 420

11 Answers11

242

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)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>
Juraj Blahunka
  • 17,913
  • 6
  • 34
  • 52
130

Yep, even in plain JavaScript it's pretty easy. You give an element an id and then you can use that as a "bookmark":

<div id="here">here</div>

If you want it to scroll there when a user clicks a link, you can just use the tried-and-true method:

<a href="#here">scroll to over there</a>

To do it programmatically, use scrollIntoView()

document.getElementById("here").scrollIntoView()
PaulBinder
  • 2,022
  • 1
  • 16
  • 26
nickf
  • 537,072
  • 198
  • 649
  • 721
  • @nickf This is not supported yet everywhere. http://caniuse.com/#search=scrollIntoView – Aditya Singh Nov 02 '16 at 14:21
  • This i def supported (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Think you didn't read the caniuse properly. However, won't be animated. Rather a pretty abrupt jump which isn't always great. – perry Jun 16 '17 at 05:45
56

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");
Meghdad Hadidi
  • 1,093
  • 13
  • 28
21

Here's a pure javascript version:

location.hash = '#123';

It'll scroll automatically. Remember to add the "#" prefix.

o.k.w
  • 25,490
  • 6
  • 66
  • 63
  • 1
    Using the primitive way of named anchor, you can have URL that includes the hash E.g. http://www.mywebsite.com/page-about/#123 Bookmarking includes the hash + scrollintoview behaviour too. – o.k.w Oct 18 '09 at 23:54
  • 1
    Would be great if you can explain a little – JGallardo Sep 18 '17 at 23:26
7

Plain Javascript:

window.location = "#elementId"
Luiz Picanço
  • 359
  • 4
  • 9
6
<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

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.

user2793243
  • 61
  • 1
  • 1
4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • It would be great if you add some comments to your code. How does it helps the asker to solve their question? – Artemix Dec 16 '14 at 13:40
1

Try this

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
0

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 < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};
Richie
  • 19
  • 5
0

Using jquery.easing.min.js, With fixed IE console Errors

Html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

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 > 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 > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });
Billu
  • 2,733
  • 26
  • 47
0

You can use scroll-behavior: smooth; to get this done without Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Sairam
  • 2,708
  • 1
  • 25
  • 34
  • scroll-behavior: smooth; is not browser compatible property. – Billu Mar 28 '19 at 06:14
  • check the browser compatibility lower in the link - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Browser_compatibility – Sairam Mar 28 '19 at 10:20
  • Yes given table in your links is showing: Edge, IE and safari are not compatible with this property. – Billu Mar 29 '19 at 04:27