jquery scrollTop not working

Question

So I'm trying to make it that then when you click a link in a carousel it scrolls you down the page to the content.

Here is my jquery:

$('#picks li a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

However I recieve this error in my console Error: Syntax error, unrecognized expression: http://hutchcreative.co.uk/rod/other/#galleryDetails

That is the correct link location but not sure how to correct it so that jquery adds in the slide?

Thanks!

score 5 · Accepted Answer · edited May 23 '17 at 12:22

If the attribute href is referencing the id of an element, you need to use the # before the actuall ID

$('#picks li a').click(function(){
    $('html, body').animate({
        scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Also note, that this will be triggered twice; I know you added html in order to work with firefox, as I Did a while a go,

So you could:

$('#picks li a').click(function(){
        $(Query.browser.mozilla ? "html" : "body").animate({
            scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

or, at least stop the animation before:

$('#picks li a').click(function(){
        $('html, body').stop(true,true).animate({
            scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

To prevent some issues with this double call

score 0 · Answer 2 · answered Nov 19 '13 at 20:37

The attr method is returning a string with the entire URL. You need to get rid of everything before the "#" in the string. You can use indexOf to find the index of the "#" character, and you can use substr to get only the portion of the string you want.

score 0 · Answer 3 · answered Nov 19 '13 at 20:42

Well when I go to your link, the first problem i get is that $ is undefined, when i try to test from console. However jQuery works fine, so your lib is obviously loaded.

The next prob is you code. You're calling for href which is getting the whole link and not just the hash mark.

jQuery('#picks li a').click(function(e){
    e.preventDefault();
    var id = $(this).attr('href').split('#');
    id = '#' + id[id.length-1];
    jQuery('html, body').animate({
        scrollTop: $( id ).offset().top
    }, 500);
    return false;
});

score 0 · Answer 4 · edited May 25 '19 at 08:42

0

I tried several ways, none worked.

For me this works with Angularjs combined.

$( "html, body" ).scrollTop( $("#main_div").offset().top );

main_div is the id in any HTML element you want.

I don't like Angularjs hashtags at the top of the URL, that's why I didn't use them.

$location.hash('main_div');

I think the animate thing complicates this.

edited May 25 '19 at 08:42

halfer

19,824
17
99
186

answered Aug 30 '18 at 15:34

Brian Sanchez

832
1
13
11

jquery scrollTop not working

4 Answers4