在jQuery中滚动到顶部和滚动到底部 [英] Scroll to Top and Scroll to Bottom in Jquery

问题描述

我尝试用jquery从上到下和从下到上实现滚动器.我最近尝试了百分比. 从顶部到底部的像素似乎还可以.(意味着它有效)从底部到顶部只有使滚动百分比不能完全结束，如果我提到百分比为100

I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent. From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100

$('#spnTop').on("click",function(){
    var percentageToScroll = 100;
    var percentage = percentageToScroll/100;
    var height = jQuery(document).height();
    var documentHeight = $(document).height();
    var scroll = $(window).scrollTop();
    alert(scroll);
    var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll;

    //alert(point);
    alert(scrollAmount);
    $('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
                          alert("reached top");    });

});

这是 小提琴 . 例如: percentToScroll现在为100，但滚动的结尾尚未完全结束. (从下到上) 从上到下为100，则它完全滚动到页面底部.

Here is the fiddle. For Example: percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top) For top to bottom is 100 then it completely scroll to bottom of the page.

我不确定如何使它可行.

I am not sure how to make it workable.

谢谢.

Vicky

推荐答案

这怎么办?

$('#spnTop').on("click",function(){
    var percentageToScroll = 100;
    var percentage = percentageToScroll/100;
    var height = $(document).scrollTop();
    var scrollAmount = height * (1 - percentage);

    alert(scrollAmount);
    $('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
                          alert("reached top");    });

});
$('#spnbottom').on("click",function() {
    var percentageToScroll = 100;
    var height = $(document).innerHeight();
    var scrollAmount = height * percentageToScroll/ 100;
    alert(scrollAmount);
     var overheight = jQuery(document).height() - jQuery(window).height();
    //alert(overheight);
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);    
});

小提琴此处

这篇关于在jQuery中滚动到顶部和滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！