如何解决新页面上的Javascript加载将锚点移动到顶部固定元素的下方
| 我只是在学习javascript(从字面上看),所以我有一点JS(在下面),它使页面定位点从页面顶部向下移动了90个像素,以防止定位点的内容被固定点覆盖顶部元素。在同一页面上单击指向锚点的链接时,它可以很好地工作。 我遇到的问题是,当我单击指向另一个页面上的锚点的链接时。加载新页面时,锚点将加载到页面顶部,并且部分隐藏在固定top元素下方。 我怀疑我在检查锚点散列的每个页面上都需要某种onLoad事件,但是对此我太陌生了。 任何帮助表示赞赏,谢谢! 统计信息:我正在为公司的网络帮助进行此操作。我们有约280多个帮助页面和2500个锚点。我希望将一些JS添加到包含或标头中可以解决我的问题。 注意:我正在使用的脚本是对另一个stackoverflow问题的解答,并且已对其进行了轻松修改。$(function(){
$(\'a[href*=#]\').click(function() {
if (location.pathname.replace(/^\\//,\'\') == this.pathname.replace(/^\\//,\'\')
&& location.hostname == this.hostname) {
var $target = (this.hash);
$target = target.length && target || (\'[name=\' + this.hash.slice(1) + \']\');
if ($target.length) {
var targetOffset = target.offset().top - 90;
$(\'html,body\').animate({scrollTop: targetOffset},1000);
return false;
}
}
});
});
解决方法
这应该工作得很好。在Firefox和Chrome中进行了测试。
$(function(){
if(location.hash !== \"\") {
window.scrollTo(0,window.pageYOffset-90);
}
});
, 如果我正确理解你的话;您希望此移动发生在页面加载时,而不是仅在单击链接时发生。如果是这种情况,您将要使用each()函数而不是click()。只需将.click替换为.each,就会在页面加载后发生。另外,为了安全起见,请将您的href匹配用双引号引起来。
$(\'a[href*=\"#\"]\').each(function() {...
, 我实际上使用一些CSS解决了这个问题(我向所有锚点添加了一个类):
a.target
{
position: relative;
border-top: 90px solid transparent;
background-clip: padding-box;
margin: -100px 0 0;
}
a.target:before
{
content: \"\";
position: absolute;
top: -90px;
left: 0;
right: 0;
border-top: 2px solid #ccc;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。