在jquery中滚动到顶部并滚动到底部

问题描述：

我试图用jQuery实现从上到下和从下到上的滚动条。我最近尝试百分比。从顶部向底部，像素看起来OK。（意味着它）的底部到顶部仅作滚动没有完全结束，如果我提到的百分比为100在jquery中滚动到顶部并滚动到底部

$('#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，它会完全滚动到页面的底部。

我不知道如何使它可行。

谢谢。

玉萍

我不知道你想实现的东西。但您可以使用'scrollTop（）' – james

您应该使用'console.log（...）;'来进行调试，而不是'alert（...）;'因为警报可能会破坏您的代码。 –

答

这个怎么样？

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

小提琴here

+1 ...我错过了1个百分点的技巧;） –

谢谢@ jaq316它的效果很好。 +1 –

@ jaq316快速问题从底部到顶部滚动我检查它工作正常。例如，让我们将底部值视为50％（从底部到顶部滚动为50％），然后它是如何工作的？从上到下只有50％？如果是的话意味着我怎样才能使滚动从下到上为50％。希望你明白我的观点？ –

答

现在看到您需要的百分比

观看演示在这里： 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() {}); 
});

我认为他需要的百分比部分 –

我认为他想使用的百分比（例如：30％，73％），这将只适用于100％ –

答

财产以后这样:)希望帮助您

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

滚动百分比怎么样？ –

为什么滚动百分比？它工作正常没有百分比 –

@AramMkrtchyan是的，它可以工作，但30％的滚动？ –

答

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

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

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

这是关于％值，这就是问题 –

答

正如我在评论中指定我准备了一个Demo

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

这将是很好，如果你解释你的代码。 – nicael

答

这里是滚动到一些有用的链接顶部和滚动到底部在Jquery 瓦特ith demo。

Scroll to Top and Scroll to Bottom in Jquery

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

在jquery中滚动到顶部并滚动到底部

相关推荐