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

});

這是小提琴 。 例如：percentageToScroll現在為100但滾動的結尾未完全完成。 （從下到上）從上到下為100然后它完全滾動到頁面底部。

我不知道如何讓它可行。

謝謝。

玉萍

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

在這里小提琴

Answer 2

現在看你需要百分比

請參閱此處的演示： 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 () {});
});

Answer 3

我希望像這樣的東西:)可以幫助你

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

Answer 4

如果始終具有頂部和底部跨度，也可以使用跨度位置。

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

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

Answer 5

正如我在評論中指出的那樣，我准備了一個演示

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

我希望它可以幫助你

Answer 6

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

Answer 7

這里有一些有用的鏈接，用於Scroll to Top和Scale to Bottom in Jquery with demo 。

在Jquery中滾動到頂部並滾動到底部

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