Question

我正在尝试建立一个锚点链接，当你点击它时向下滚动到另一个元素。我尝试过上一个问题的答案：Smooth scrolling when clicking an anchor link使用此代码

$('a[href*=#]').click(function(event){
$('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});

当我将此代码用于此HTML

时

<a id="des" href="#scroll">
<img name="scroll" id="scroll" src="whatever">

它不会平滑滚动，而是立即跳到这里。它也没有跳到正确的地方。它会跳到图像下方，以便您无法看到图像。

我想要做的事情：我正试图这样做当我点击这个锚元素时，它会平滑滚动到这个图像而不会将其剪切掉。我的意思是，当我现在这样做时它会跳过图像。

Answer 1

这将做你想要的。它来自StackOverFlow的某人。我不记得哪个用户。

$(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
        }, 800);
        return false;
      }
    }
  });
});

修改这也是我在顶部有固定导航时所做的。这将抵消导航的数量。

在css中

a.anchor { display: block; position: relative; top: -45px; //or what ever the set px amount you have set to your nav visibility: hidden; }

在图片标记之前使用此锚标记

<a class="anchor" id="WhateverYourHerfIs"></a>

HTML Anchor链接平滑滚动

1 个答案: