我正在走出我的疯狂想法试图解决这个问题,相对而言是一个菜鸟,所以如果这非常简单,我会原谅我。
我有一个固定的标题,我已经弄清楚如何减去函数中标题的高度。当我在同一页面上时单击链接时,平滑滚动工作完美。当我从外部页面单击相同的链接时,它会加载但无法识别标题集。
实施例
<a href="mypage#link1"> clicked on http://mypage/ = correct results
<a href="mypage#link1"> clicked on http://mypage/other_page = incorrect results
jQuery(document).ready(function($) {
$(function() {
$('a[href*=#]:not([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) {
$('html,body').animate({
scrollTop: target.offset().top - 81
}, 800);
return false;
}
}
});
});
});
我确信我错过了一些东西,我认为if语句应该包含一个检查条件,然后处理它来自另一个页面的事实。这应该是这么简单,它踢我的但是!!!所以在这里的任何帮助将不胜感激。谢谢。
答案 0 :(得分:0)
据我所知,你只是在该页面上的链接上捕获点击事件...当点击不同页面上的链接时,这将无效,因为目标页面上没有触发点击事件(并且原始页面完全无法控制目的地)......
所以你需要在页面加载时捕获哈希值(即直接在你的jQuery(document).ready()
函数内)并在其中进行滚动动画。
此外,您可能需要阻止浏览器“自动”滚动到目标滚动点,然后才有机会进行动画制作 - 这可能就是您现在所看到的,因为这是AFAIK的默认行为自命名锚点出现以来的所有浏览器。
你可以采取以下两种方式:
这适用于Firefox,也可能适用于其他浏览器:
jQuery(document).ready(function($) {
$(function() {
var target = $('[name=' + location.hash.slice(1) +']');
if (target.length) {
$('html,body').css({
scrollTop: 0
}).animate({
scrollTop: target.offset().top - 81
}, 800);
}
$('a[href*=#]:not([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) {
$('html,body').animate({
scrollTop: target.offset().top - 81
}, 800);
return false;
}
}
});
});
});