简体   繁体   中英

How to scroll down like scroll up ,In scroll down I'm not getting page height

I'm unable to scroll down at the bottom...

At there above code is working fine for top but for bottom we don't know the height of page.Then it's creating problem for going end of the page. please suggest me...Thanks

$('.scrollToDown').fadeIn();
$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('.scrollToTop').fadeIn();
        $('.scrollToDown').fadeOut();
    } else {
        $('.scrollToTop').fadeOut();
        $('.scrollToDown').fadeIn();
    }
});
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},700);
    return false;
});
$('.scrollToDown').click(function(){
    $('html, body').animate({scrollTop : 5110},1000);
    return false;
});

You can use $(document).height()

try this

$('.scrollToDown').fadeIn();
$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('.scrollToTop').fadeIn();
        $('.scrollToDown').fadeOut();
    } else {
        $('.scrollToTop').fadeOut();
        $('.scrollToDown').fadeIn();
    }
});
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},700);
    return false;
});
$('.scrollToDown').click(function(){
    $('html, body').animate({scrollTop : $(document).height()},1000);
    return false;
});

You can just animate to scroll down the page by animating the scrollTop property, no plugin required, like this:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Note the use of window.onload (when images are loaded...which occupy height) rather than document.ready.

To be technically correct, you need to subtract the window's height, but the above works:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

To scroll to a particular ID, use its .scrollTop(), like this:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

The value that you should scroll to is the height of the page minus the height of the window:

$('.scrollToDown').click(function(){
    var h = $(document).height() - $(window).height();
    if (h > 0) {
        $('html, body').animate({scrollTop : h},1000);
    }
    return false;
});

Demo: http://jsfiddle.net/Guffa/cnfn8ayr/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM