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

Scroll to Top and Scroll to Bottom in Jquery

提问by Vignesh Pichamani

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

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

});

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.

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

I am not sure how to make it workable.

我不知道如何使它可行。

Thanks.

谢谢。

Vicky

薇琪

回答by Jacques Snyman

What about this?

那这个呢？

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

Fiddle here

在这里摆弄

回答by James

As I specified in comment I prepared a 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);
});

I hope it may help you

我希望它可以帮助你

回答by Stewartside

Now see you need the percentages

现在看到你需要百分比

See demo here: http://jsfiddle.net/a3g4d/

在此处查看演示：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 () {});
});

回答by Aram Mkrtchyan

I hope something like this :)might help you

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

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

Use this link to try it out : demo

使用此链接进行试用：演示

回答by Monie corleone

You can also use the span positions if you have top and bottom span always.

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

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

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

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

回答by mostofa

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

回答by Bharath Kumaar

Here is some useful links for Scroll to Top and Scroll to Bottom in Jquery with demo.

这里有一些有用的链接，用于使用演示在 Jquery 中滚动到顶部和滚动到底部。

Scroll to Top and Scroll to Bottom in Jquery

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

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