jquery - 使用 jquery 显示隐藏的 div 并移动到页面顶部

Question

我的页面上有一个在加载时隐藏的 div。使用 Jquery 我想显示隐藏的 div 并隐藏打开的 div。这是我的代码：

<script type="text/javascript">
// hides the slickbox as soon as the DOM is ready
$('#details').hide();

// shows the slickbox on clicking the noted link  
$('#proceed').click(function () {
    $('#details').show('slow');
    $('#contColL').hide('slow');
    $('#contColR').hide('slow');
    $('#intro').hide('slow');
    return false;
});

$('#reviewPlate').click(function () {
    $('#details').hide('slow');
    $('#contColL').show('slow');
    $('#contColR').show('slow');
    $('#intro').show('slow');
    return false;
});             
</script>

这工作正常，但我无法让新页面从顶部显示。相反，它从命名的 div 显示 - 详细信息。如何让新显示的页面从顶部显示？

Answer 1

您可以在方法的末尾添加一行以将页面滚动到顶部：

window.scrollTo(0,0)

或者，如果你想动画滚动，你动画滚动顶部：

$("html, body").animate({ scrollTop: "0px" }, 500);

500动画的持续时间在哪里。

然后您的代码将如下所示：

<script type="text/javascript">
// hides the slickbox as soon as the DOM is ready
$('#details').hide();

// shows the slickbox on clicking the noted link  
$('#proceed').click(function () {
    $('#details').show('slow');
    $('#contColL').hide('slow');
    $('#contColR').hide('slow');
    $('#intro').hide('slow');
    $("html, body").animate({ scrollTop: "0px" }, 500);
    return false;
});

$('#reviewPlate').click(function () {
    $('#details').hide('slow');
    $('#contColL').show('slow');
    $('#contColR').show('slow');
    $('#intro').show('slow');
    $("html, body").animate({ scrollTop: "0px" }, 500);
    return false;
});             
</script>