jQuery: how to scroll to certain anchor/div on page load?

Question

Lately im trying to use jquery more often and right now im having some problem i'd like to solve with jquery hope u could help me.

I have some web page that includes some anchor tag (lets say the anchor is located in the middle of the page) and on the event onload i want the page to start on that certain anchor tag location meaning the page will be "scrolled" automaticaly to a certain location.

That was my previous solution (which is quite ugly since it adds #i to my url)

window.onload = window.location.hash = 'i';

Anyway could u tell me how can i do it with jquery?

notice: i don't want the user to feel any slide or effect while getting to this location

so you just want the user to "pop-in" to that section, no slide effects whatsoever? — Joseph, Mar 18 '12 at 10:43

score 37 · Accepted Answer · answered Mar 18 '12 at 10:42

37

Use the following simple example

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

where ele is your element (jQuery) .. for example : scrollToElement($('#myid'));

answered Mar 18 '12 at 10:42

Manse

36,627
9
75
105

Works perfect!! :) just for the sport i'd like to learn about more solutions from others though im satisfied right now :) – Popokoko Mar 18 '12 at 10:52
@Himu its very simple ... it sets the scroll position of the to the top left of the element you pass in ... – Manse Mar 19 '14 at 08:46

score 27 · Answer 2 · answered Sep 22 '13 at 12:57

27

There's no need to use jQuery because this is native JavaScript functionality

element.scrollIntoView()

answered Sep 22 '13 at 12:57

graham mendick

1,771
1
16
14

This should be the correct answer, the example in the question does not use jQuery – Reshape Media Apr 07 '16 at 21:24
@ReshapeMedia I agree its the simplest answer - but read the question -> _Anyway could u tell me how can i do it with jquery?_ – Manse Nov 17 '16 at 12:10
scrollIntoView is not a function happened for me. – Abram Jun 14 '17 at 20:44
1

based on documentation, its supported in Firefox only – stenly Jun 24 '17 at 05:48
`scrollIntoView` has wide support (it's the options parameter that's only supported in Firefox) – graham mendick Jun 28 '17 at 11:03
This should be executed after page load as [here](https://stackoverflow.com/a/19113062/3917161) said. – J3soon Jul 23 '18 at 15:24

Lightningsoul · Answer 3 · 2020-03-16T17:52:09.533

18

I have tried some hours now and the easiest way to stop browsers to jump to the anchor instead of scrolling to it is: Using another anchor (an id you do not use on the site). So instead of linking to "http://#YourActualID" you link to "http://#NoIDonYourSite". Poof, browsers won’t jump anymore.

Then just check if an anchor is set (with the script provided below, that is pulled out of the other thread!). And set your actual id you want to scroll to.

$(document).ready(function(){


  $(window).load(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){

       // Clear the hash in the URL
       // location.hash = '';   // delete front "//" if you want to change the address bar
        $('html, body').animate({ scrollTop: $('#YourIDtoScrollTo').offset().top}, 1000);

       }
   });
});

See https://lightningsoul.com/media/article/coding/30/YOUTUBE-SOCKREAD-SCRIPT-FOR-MIRC#content for a working example.

edited Mar 16 '20 at 17:52

answered Dec 23 '13 at 02:55

Lightningsoul

532
5
15

This solution worked like a charm for me, but I've: **a)** decreased animate delay from 1000 to 400; **b)** maintained hash untouched in URL address bar, and **c)** changed `#YourIDtoScrollTo` to `'+hash+'` in order to scroll to whatever dynamic hashes my website offers and user navigates to... – Hudson Santos Apr 18 '16 at 16:35
Sounds good. I would suggest to implement your changes for anyone who needs this. With exception of the delay which is optional to each developers needs. ;) – Lightningsoul Mar 18 '17 at 10:50
2

Why do you have `$(document).ready(function()` AND `$(window).load(function()`? – Chuck Le Butt Aug 01 '18 at 11:39
@ChuckLeButt this has been pulled out of another thread as mentioned. I would guess this has been to counter some weird bugs in browsers. If you want to know more, here's a thread https://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready – Lightningsoul Mar 16 '20 at 17:56

score 3 · Answer 4 · answered Jan 14 '17 at 05:11

3

i achieve it like this..

if(location.pathname == '/registration')
{
$('html, body').animate({ scrollTop: $('#registration').offset().top - 40}, 1000);
}

answered Jan 14 '17 at 05:11

Asad Ali Khan

287
3
15

score 1 · Answer 5 · answered Mar 21 '15 at 16:38

    /* START --- scroll till anchor */
        (function($) {
             $.fn.goTo = function() {
                  var top_menu_height=$('#div_menu_header').height() + 5 ;
                  //alert ( 'top_menu_height is:' + top_menu_height );
                  $('html, body').animate({
                        scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px'
                  }, 500);
                  return this; // for chaining...
             }
        })(jQuery);

        $(document).ready(function(){

          var url = document.URL, idx = url.indexOf("#") ;
          var hash = idx != -1 ? url.substring(idx+1) : "";

          $(window).load(function(){
             // Remove the # from the hash, as different browsers may or may not include it
             var anchor_to_scroll_to = location.hash.replace('#','');
             if ( anchor_to_scroll_to != '' ) {
                 anchor_to_scroll_to = '#' + anchor_to_scroll_to ;
                 $(anchor_to_scroll_to).goTo();
             }
            });
        });
    /* STOP --- scroll till anchror */

score 1 · Answer 6 · edited May 23 '17 at 11:46

1

Have a look at this

Appending the #value into the address is default behaviour that browsers such as IE use to identify named anchor positions on the page, seeing this comes from Netscape.

You can intercept it and remove it, read this article.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 18 '12 at 10:44

JadedEric

1,669
2
20
40

this is an animated version ... the OP wanted to do it without animation ! – Manse Mar 18 '12 at 10:45
OP could modify code, this is examples of functionality to help him in the right direction. – JadedEric Mar 18 '12 at 10:46

score 0 · Answer 7 · edited Dec 12 '18 at 18:16

0

Just append #[id of the div you want to scroll to] to your page url. For example, if I wanted to scroll to the copyright section of this stackoverflow question, the URL would change from

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load

to

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load#copyright

notice the #copyright at the end of the URL.

edited Dec 12 '18 at 18:16

richbai90

4,175
3
35
73

answered Sep 10 '15 at 05:46

Bopsi

1,244
2
25
45

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – dippas Dec 12 '18 at 15:33

nitesh sharma · Answer 8 · 2013-11-12T09:10:27.120

0

just use scrollTo plugin

$("document").ready(function(){
  $(window).scrollTo("#div")
})

edited Nov 12 '13 at 09:10

answered Mar 18 '12 at 10:46

nitesh sharma

591
2
5
15

I added the plugin but it still says $("window").scrollTo is not a function – Popokoko Mar 18 '12 at 11:02
1

i am sorry it is $(window).scrollTo("#id") or you can also use $.scrollTo("#id") – nitesh sharma Mar 18 '12 at 13:01

jQuery: how to scroll to certain anchor/div on page load?

8 Answers8

Linked

Related