3

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

});

这是小提琴。例如：percentToScroll 现在是 100，但滚动的结尾还没有完全结束。（从下到上）从上到下是 100，然后它完全滚动到页面底部。

我不知道如何使它可行。

谢谢。

维姬

4

7 回答 7

4

那这个呢？

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

在这里提琴

于 2013-10-22T08:53:16.347 回答
2

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

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

我希望它可以帮助你

于 2013-10-22T09:08:11.693 回答
1

现在看到你需要百分比

在此处查看演示：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 () {});
});
于 2013-10-22T08:44:35.310 回答
1

我希望这样的事情:)可以帮助你

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

使用此链接试用：demo

于 2013-10-22T08:46:44.447 回答
1

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

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

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

于 2013-10-22T08:49:10.830 回答
1 
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;    
    });
});
于 2015-03-28T07:50:28.817 回答
0 
$(function () {
    $("#scrollToBottom").click(function () {
        $('html, body').animate({ scrollTop: window.screen.height }, 400);
    });
    $("#scrollToTop").click(function () {
        $('html, body').animate({ scrollTop: 0 }, 400);
    });
});
于 2015-04-29T09:43:32.193 回答