我试图创建一个"单页布局",使用内部链接平滑滚动。这是代码:
function scrollto(element) {
$('html, body').animate({
scrollTop: ($(element).offset().top - 40)
}, 'slow'); };
页面上有一个固定的标题,因此值为 -40。
该脚本在实现它的站点中完美运行。对于我使用的链接:
<a href="javascript:scrollto('.link1');">Go to Link 1</a>
。并用类"标记"div:
<div class="link1">
<h1>This is link no 1</h1> <p>Text</p>
</div>
下面是一个示例:平滑滚动示例
如何创建放置在其他网站上的链接,这将导致我的文档中出现指定的 DIV?通常,使用锚点,它将是:
<a href="example.html#link1">Go to Link 1</a>
但是由于固定的标题,我不使用锚点,并且对它们没有任何很好的经验。
有没有办法转换这个内部链接
"javascript:scrollto('.link2');"
这样我就可以从"外部"链接一些 DIV?
非常感谢您的帮助。我一直在谷歌上搜索很多。虽然找不到答案。我不是高级JavaScript用户,所以请理解。谢谢。
更新
在页面完全加载后使jQuery工作非常重要:
$(window).bind("load", function() {
//code here...
});
这样最后脚本应该看起来像这样:
$(window).bind("load", function() {
window.scrollTo = function (selector) {
if (selector === '') { return; }
return $('html, body').animate({
scrollTop: $('.' + selector).offset().top - 117
}, 'fast');
};
$(document).ready(function () {
scrollTo(window.location.hash.replace(/^#/, ''));
});
});
它解决了我的问题。