Question

我有来自封面页（第1页）的（新闻）文章链接，看起来像这样......

<a href="nn.com/stories/being_at_mall.html#article">Read this story</a>

另一方面，目标页面（第2页），div等待此评论

<div id="#article"></div>

我想做/尝试的是什么;

点击第1页上的链接后，首先加载第2页以加载并保持在最高位置可能持续1秒（对于用户来说，第2页上的标题有点大笑），
之后的介绍，让页面顺利向下滚动到锚定的div。

如果需要，我会在（＆lt; div id="top"></div>）页面上标记一个非常顶部。

提前谢谢！

Answer 1

在being_at_mall.html文件加载时运行此代码

$(function () {
    $(document.body).animate({
        scrollTop: $(location.hash).offset().top
    }, {
        duration: 'slow',
        easing: 'swing'
    });
});

Demo您可以在演示中看到它在页面加载时滚动。上面的代码使用了location.hash，它会为您提供#article，即is_at_mall.html中元素的ID。

同样this page *列出了有关如何与演示一起平滑滚动的更多选项。

*我是该页面的作者。我在学习jQuery时创建了这个。

Answer 2

将此代码嵌入js文件中。这将在＆＃34; hashchange ＆＃34;上运行事件。当在URL中找到 pageName＃sectionID 时，页面将滚动到该部分。

$(document).ready(function(){

var ids;
function offsetAnchor() {

if(location.hash.length !== 0) {
    ids = location.hash;
    var scrollAmnt =  $(ids).offset().top;
    setTimeout(function() {$('html,body').animate({scrollTop:scrollAmnt},2000);}, 500);}
}

$(window).on("hashchange", function () {
    offsetAnchor();
});

window.setTimeout(function() {
    offsetAnchor();
    event.preventDefault();
}, 1);

setTimeout(function() {$('html,body').animate({scrollTop:00},0000);}, 10);  
});

在第2页上滚动到div smoothy - 点击第1页上的链接后？

2 个答案: