Question

我有一个页面，该页面使用书签从一组顶部链接跳至下面文档中的段落。从上到下的所有链接都可以使用，但是从页面较远的段落到顶部的许多链接都无法使用。每个段落末尾的书签都有一个向上的小箭头符号-单击时，它会跳回到顶部。在两个地方，我都使用锚标记。我想用jQuery函数替换书签以跳回到顶部，以确保可靠性，因为从下到上的书签有时在Firefox中失败，尽管在Chrome中从来没有。

在研究此问题时，我发现了许多方法，但到目前为止，只有一种方法在锚点之间跳来跳去。

以下是示例顶部链接：

<a href="#bkmk31" id="mkt31" class="tq_fq_lk" style="text-decoration: none"><span class="blank">Section title</span></a><br>

以下是该段跳转到的页面下方：

<div class="z_01">Paragraph text.&nbsp;&nbsp;<a href="#mkt31" class="tq_fq_lk" style="text-decoration: none"><span class="blank"><img src="images\cnr-rt-up.svg" alt="Top"></span></a></div><br>

css类仅用于样式设计，因此我将其省略以使其简短。

到目前为止，我发现的最接近的示例是https://www.taniarascia.com/smooth-scroll-to-id-with-jquery：

<script>
$("a[href^='#']").click(function(e) {
  e.preventDefault();

var position = $($(this).attr("href")).offset().top;

$("body, html").animate({
  scrollTop: position
  } /* speed */ );
});
</script>

但是，这将导致页面上的所有链接不起作用。到目前为止，我还没有发现其他任何一个锚点之间的例子。

我的问题是：

为什么这段代码会导致页面上的所有链接失败？
我可以使用onclick函数跳转到顶部吗？
浏览器如何区分成功的jQuery跳转和书签跳转？链接的结构与常规html书签完全相同。

感谢您的帮助。

使用jQuery从锚滚动到锚

0 个答案: