scrollTo a div once a button is clicked?

Question

I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#article-list').scrollTo('#news .section-wrap');  // this is the line I added
    $('#article-list').fadeOut(500, function(){
        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
    });
});

score 1 · Accepted Answer · answered Sep 12 '14 at 01:07

1

You will need to animate html and body and point to the selector within the jQuery animate function. Try this:

$('html, body').animate({
    scrollTop: $('#news .section-wrap').offset().top
}, 2000);

answered Sep 12 '14 at 01:07

bencripps

1,999
3
16
27

No prob, glad I could help. – bencripps Sep 12 '14 at 01:11

score 0 · Answer 2 · answered Sep 12 '14 at 01:09

Try something like this:

$(".paging-navigation a").click(function(){
    $('html, body').animate({
        scrollTop: $("#news .section-wrap").offset().top
    }, 500);
});

You might need to alter something in this code, either timing or some bug since i could not test it currently.

Hope it is helpful.

score 0 · Answer 3 · edited May 23 '17 at 11:49

scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .

As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

scrollTo a div once a button is clicked?

3 Answers3