Javascript 在Jquery中滚动到顶部和底部

我尝试用jquery实现从上到下和从下到上的滚动程序。我最近试过百分数。 从上到下的像素看起来是可以的。（意味着它可以工作）如果我提到百分比为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");    });

});

这是。 例如： percentageToScroll现在为100，但滚动的结尾尚未完全完成。（从下到上） 如果“从上到下”为100，则它将完全滚动到页面底部

我不知道如何使它可行

谢谢

---

Vicky现在知道你需要百分比了

请参见此处的演示：

---

我希望像这样的

：）

可以帮助你

$('#spnTop').on("click",function(){
    $('html,body').animate(
        { scrollTop: 0 }, 
        'slow', 
        function () {});
});

$('#spnbottom').on("click",function() {
    var window_height = $(window).height();
    var document_height = $(document).height();
    $('html,body').animate(
        { scrollTop: window_height + document_height }, 
        'slow', 
        function () {});
});

---

使用此链接进行尝试：

如果始终使用顶部和底部跨距，也可以使用跨距位置

$('#spnTop').on("click",function(){
    $('html,body').animate({
        scrollTop:  $("#spnbottom").offset().top
    }, 'slow', function () {
        alert("reached top");
    });
});

这个怎么样

$('#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);    
});

---

按我在评论中的说明，我准备了一份

---

我希望它能对您有所帮助

我不知道您想要实现什么。但是您可以使用

scrollTop（）

您应该使用

console.log（…）用于调试，而不是
警报（…）警报可能会中断您的代码。我认为他需要百分比partI我认为他想要使用百分比（例如：30%，73%），这只适用于100%滚动百分比如何？它是关于%值，这是problem@jaq316快速问题滚动从下到上我检查了它的工作良好。例如，让底部值为50%（从下到下滚动为50%），那么它是如何工作的呢？从上到下只占50%？如果是，则表示如何将从下到上的滚动设置为50%。希望你明白我的意思吗？@Vicky你的意思是如果页面向下滚动50%，你想滚动到顶部吗？不，我的问题是，我们正在使用scrollTop jquery执行滚动功能。让我们考虑从底部到顶部的30%，然后如何从底部工作？我已经更新了我的答案和小提琴回答你的问题感谢@ JAQ316看到这个小提琴我不确定这是测试场地高度现在我想从上到下滚动，89%不正常工作，从底部到顶部是完美的工作。让我知道我需要做什么改变。
jQuery(document).ready(function($){
    $('#goToTop').on("click",function(){
        $("html, body").animate({ scrollTop: 0 }, 2000);
        return false;
    });
    $('#goToBottom').on("click",function() {
        $("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
        return false;    
    });
});

$(document).on("click","#spnTop",function(){
    $('html,body').animate({scrollTop: 0}, 1500);

});
$(document).on("click","#spnbottom",function() {
  var window_height = $(window).height();
    var document_height = $(document).height();
    $('html,body').animate({ scrollTop: window_height + document_height },1500);
});

jQuery(document).ready(function($){
    $('#goToTop').on("click",function(){
        $("html, body").animate({ scrollTop: 0 }, 2000);
        return false;
    });
    $('#goToBottom').on("click",function() {
        $("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
        return false;    
    });
});

$(function () {
    $("#scrollToBottom").click(function () {
        $('html, body').animate({ scrollTop: window.screen.height }, 400);
    });
    $("#scrollToTop").click(function () {
        $('html, body').animate({ scrollTop: 0 }, 400);
    });
});