Question

我有这个代码可以让页面上下滚动，请告诉我当我点击时如何让它回到滚动位置而不是向下翻页？

<a href="javascript://" id="toDown">Down</a>
<a href="javascript://" id="toTop">Top</a>

<script type="text/javascript">
jQuery.noConflict();
$(window).scroll(function(){
    if($(window).scrollTop() > "0"){
        $('#toTop').fadeIn();
        $('#toDown').hide();
    }else if($(window).scrollTop() == "0"){
        $('#toTop').fadeOut();
        $('#toDown').fadeIn();
    }
});
$('#toTop').click(function(){
    $('html, body').animate({scrollTop:0}, 0);
    $('#toDown').fadeIn();
});
$('#toDown').click(function(){
    $('html, body').animate({$('body').height()}, 0);
    $('#toDown').fadeOut();
});
</script>

Answer 1

添加变量以在点击“top”时存储滚动位置：

var iPosition = null;

如果单击“顶部”，则保存当前滚动位置：

iPosition = $(window).scrollTop();

如果单击“向下”，请检查是否存储了滚动位置;如果是，请移至此位置，否则移动文档的末尾：

$('html, body').animate({scrollTop: (iPosition === null ? $('body').height() : iPosition)}, 0);

完整的源代码：

var iPosition = null;                              // new
jQuery.noConflict();
$(window).scroll(function(){
    if($(window).scrollTop() > "0"){
        $('#toTop').fadeIn();
        $('#toDown').hide();
    }else if($(window).scrollTop() == "0"){
        $('#toTop').fadeOut();
        $('#toDown').fadeIn();
    }
});
$('#toTop').click(function(){
    iPosition = $(window).scrollTop();             // new
    $('html, body').animate({scrollTop:0}, 0);
    $('#toDown').fadeIn();
});
$('#toDown').click(function(){
    $('html, body').animate({scrollTop: (iPosition === null ? $('body').height() : iPosition)}, 0);   // changed
    $('#toDown').fadeOut();
});

另见jsfiddle。

向下滚动到位置

1 个答案: