javascript - jquery : how to jump to position without scrolling

Question

我编写了以下函数，当单击 href 时，该函数会滚动到某个 anchor 位置:

$("a").click(function() {

href="#myAnchor";
    var fromTop = 95;

    if(href.indexOf("#") == 0) {
      var $target = $(href);
      if($target.length) {
        $('html, body').animate({ scrollTop: $target.offset().top - fromTop });
          return false;
        }
      }
 };
  return false;});

如何更改此功能，以便我跳到我的 anchor 而不“滚动”。当点击href时，应该直接跳转到myanchor位置。

Answer 1

这是 HTML 的标准功能，称为“书签”，不需要 JS。首先将书签放在您希望浏览器滚动到的位置:

<a name="my-bookmark"></a>

然后在需要的地方放置您的链接:

<a href="#my-bookmark">Go to bookmark</a>

HTML5 还允许您通过 id 指定书签元素的:

<div id="foo">Foo</div>

<!-- in another part of the page, far far away -->
<a href="#foo">Go to foo</a>

<小时/>

更新

如果您需要允许在页面顶部填充，那么您可以使用 <a name="x"></a>方法并将它们放置在目标上方所需的距离处，尽管这可能会变得难以维护。

你可以在这种情况下使用这个 JS:

$("a.bookmark").click(function(e) {
    e.preventDefault();
    var href = $(this).attr(href);
    var fromTop = $('#fixed-header').height();
    $(window).scrollTop($(href).offset().top - fromTop)
});