Jquery中的“滚动到顶部”和“滚动到底部”

Question

我尝试使用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");    });

});

这里是 fiddle。 例如： percentageToScroll现在是100，但滚动结束时并没有完全完成。（从底部到顶部） 对于从上到下是100，那么它会完全滚动到页面底部。 我不确定如何使其可用。 谢谢。 Vicky

- Vignesh Pichamani

---

我不知道你想要实现什么。但是你可以使用 scrollTop()。 - James

调试时应该使用 console.log(...); 而不是 alert(...);，因为弹出框会干扰你的代码。 - Richard de Wit

Answer 1

这个怎么样？

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

在这里运行代码

- Jacques Snyman

---

@jaq316 快速提问，我检查了从底部向上滚动的功能，它运行良好。例如，假设将底部值视为50％（从底部向上滚动为50％），那么它是如何工作的？仅从顶部到底部需要50％吗？如果是的话，那么我该如何使从底部向上滚动为50％？希望你明白我的意思？ - Vignesh Pichamani

我的问题是，我们正在使用scrollTop jQuery函数进行滚动操作。如果从底部到顶部的距离为30％，那么它如何从底部工作？ - Vignesh Pichamani

我已经更新了我的答案和代码示例，以回答你的问题。 - Jacques Snyman

谢谢@jaq316，请查看这个fiddle，我不确定这是测试站点的高度，现在我想从顶部向底部滚动，但89%无法正常工作，而从底部到顶部则完美运行。请告诉我需要做出哪些更改。http://jsfiddle.net/SzuAT/ - Vignesh Pichamani

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/39744/discussion-between-jaq316-and-vicky - Jacques Snyman

Answer 2

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;    
    });
});

- mostofa

Answer 3

如我在评论中所指定的，我准备了一个演示

。

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

我希望这可以对您有所帮助

- James

Answer 4

现在您需要百分比。

请点击此处查看演示： http://jsfiddle.net/a3g4d/

$('#spnTop').on("click",function(){
    var percentage = 100;
    var height = $(document).height();
    var remove = +height / +100 * +percentage;
    var spaceFromTop = +height - +remove;
    $('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function () {});
});

- Stewartside

---

我认为他需要百分比部分。 - Jacques Snyman

我认为他想使用百分数（例如：30％，73％），这只适用于100％。 - Tomas Ramirez Sarduy

Answer 5

我希望像这样的东西 :) 可以帮到你。

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

使用此链接进行尝试：演示。保留HTML，不作解释。

- Aram Mkrtchyan

---

百分比滚动怎么样？ - Jacques Snyman

Answer 6

如果您始终拥有顶部和底部的跨度，您还可以使用跨度位置。

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

http://jsfiddle.net/4qLvC/8/

- Monie corleone

---

这是关于百分比值的问题。 - Tomas Ramirez Sarduy

Answer 7

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

- Barath Kumar