Question

我的页面上有一个div，它在加载时隐藏。使用Jquery我想显示隐藏的div并隐藏open 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>

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

1 个答案: