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?

4
  • 3
    just a small note: attribute "name" is not allowed in XHTML 1.1 Strict, use an ID instead Oct 19, 2009 at 21:34
  • interesting question, can't use page coordinates to scroll? I think we should be able to.
    – Omar Abid
    Feb 8, 2010 at 10:46
  • I got solution similar to your requirement at [here][1] [1]: stackoverflow.com/questions/3432656/… Apr 18, 2013 at 12:49
  • @mrblah does your problem resolved? Jul 7, 2013 at 8:42

11 Answers 11

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>
3
  • Thanks @Juraj Blahunka, but I do this without any plugin Jan 1, 2014 at 13:26
  • The link is not taking me to ScrollTo. Can you update it please?
    – Barnee
    Jan 13, 2014 at 13:12
  • This should be the answer!
    – neelmeg
    Apr 15, 2016 at 16:39
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()
2
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");
5
  • 3
    +1 This is probably the best answer. Not much code and does not require a plugin.
    – Tricky12
    Apr 10, 2014 at 17:56
  • 1
    Note that you might need to recalculate the offset on window resize.
    – Bart Burg
    May 19, 2014 at 10:01
  • 2
    @BartBurg good point-- or just recalculate right before the .animate call happens Jul 21, 2014 at 13:54
  • 5
    Love the simple answer. Why do people have to make things so complicated? Don't want another plugin.
    – sterfry68
    Nov 17, 2014 at 22:14
  • 1
    Indeed the best answer. Jan 8, 2018 at 16:22
21

Here's a pure javascript version:

location.hash = '#123';

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

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

Plain Javascript:

window.location = "#elementId"
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.

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

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

1
  • 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, 2014 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
            });
        }
    });
};
1
  • I had the bounce issue, but your method doesn't work
    – Anon
    Dec 30, 2016 at 10:54
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();
            });
        });
1
  • That is way too much code for such a simple task. location.hash = 'idOfElement'; should suffice Mar 25, 2019 at 18:45
0

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

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

3
  • scroll-behavior: smooth; is not browser compatible property.
    – Billu
    Mar 28, 2019 at 6:14
  • check the browser compatibility lower in the link - developer.mozilla.org/en-US/docs/Web/CSS/…
    – Sairam
    Mar 28, 2019 at 10:20
  • Yes given table in your links is showing: Edge, IE and safari are not compatible with this property.
    – Billu
    Mar 29, 2019 at 4:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.