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 に答える
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 () {});
});

このリンクを使用して試してみてください：デモ

于 2013-10-22T08:46:44.447 に答える
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 に答える
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 に答える
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 に答える