Question

我有一个网页，底部有一个顶部链接，并在页面顶部锚定它。在页面滚动到该元素之后，我有以下JavaScript来修复元素（#primary_nav）：

window.onscroll = scroll;
var scrollFlag = 0;

function scroll() {
    if (window.pageYOffset >= 120 && scrollFlag == 0)
    {
        document.getElementById('content').style.margin = '35px auto 0 auto';
        document.getElementById('primary_nav').style.position = 'fixed';
        document.getElementById('primary_nav').style.top = '35px';
        document.getElementById('primary_nav').style.width = '100%';
        scrollFlag = 1;
    }
    else if(window.pageYOffset < 120 && scrollFlag == 1)
    {
        document.getElementById('content').style.margin = '0 auto';
        document.getElementById('primary_nav').style.position = 'static';
        document.getElementById('primary_nav').style.top = 'auto';
        document.getElementById('primary_nav').style.width = '1024px';
        scrollFlag = 0;
    }
}

如果我禁用此javascript，链接可以正常工作并将用户发送回页面顶部。锚不在primary_nav或内容中。

HTML元素声明如下：

<a name='top'></a>
<a href='#top' id='backtotop' title='{$this->lang->words['go_to_top']}'><img src='{$this->settings['img_url']}/top.png' alt='' /></a>

如何兼具javascript （粘性导航）和工作锚链接的效果？

您还可以查看live site。

到目前为止，我已经尝试了

移动顶部锚点<body>
使用href和window.location = '#top'的javascript（window.scrollTo(0,0)和href）替换“转至顶部”按钮onclick。（这些都在Chrome上进入控制台时有效）

This jsfiddle表示它是由我的脚本与其他内容冲突引起的。访问它的唯一其他脚本是：

if($('backtotop')){$('backtotop').observe("click",function(e){Event.stop(e);window.scroll(0,0);});}

Answer 1

我想出了你的部分问题。

我注意到我无法输入location.hash = 'top'并将其跳转到top，除非我将其从#content_jump中删除。我认为这是因为隐藏了#content_jump。

似乎所有以#开头的链接上都会有一个事件监听器导致问题。我注意到大多数锚链都做了很多花哨的东西。

Answer 2

我自己的Javascript在默认脚本中覆盖了同名函数，导致失败。重命名我的滚动功能解决了这个问题。

为什么我的javascript会破坏锚点？

2 个答案: