0

我有一个来自 ie 封面（第 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。

如果需要，我在页面的顶部有一个标记，例如 (< div id="top"></div>)。

提前谢谢！

4

2 回答 2

0

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

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

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

此页面*还列出了有关如何与演示一起平滑滚动的更多选项。

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

于 2013-09-06T02:56:42.717 回答
0

将此代码嵌入到您的 js 文件中。这将在“ hashchange ”事件上运行。当在 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);  
});
于 2015-09-08T06:06:16.197 回答