Question

我编写了以下函数，当点击href时，它会滚动到某个锚位置：

$("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;});

如何更改此功能，以便在没有“滚动”的情况下跳转到我的锚点。当点击href时，它应该直接与myanchor位置混在一起。

Answer 1

这是HTML的标准功能，称为＆＃39;书签＆＃39;，不需要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)
});

Answer 2

默认情况下，animate()的速度设置为＆＃34; 400ms＆＃34;。你应该把它放在0：

 $('html, body').animate({ scrollTop: $target.offset().top - fromTop }, 0);

编辑：或使用scrollTop()作为@Rory McCrossan解释

Answer 3

而不是animate以这种方式使用.scrollTop()：

$(document).scrollTop($target.offset().top - fromTop);

Answer 4

这是一种不使用任何脚本的简单方法：

将div的id分配给你要跳转到的地方

<a href='#jumpto'>Jump</a>

<div id='jumpto'></div>

Answer 5

没有jQuery，只有HTML

<a href="#aaa">go to aaaaa</a> | <a href="#bbb">go to bbb</a>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    
<a name="aaa">aaa</a>
    
    
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    
  
<a name="bbb">bbb</a>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

EXAMPLE

jquery：如何在不滚动的情况下跳转到位置

5 个答案: