HTML Anchor 链接平滑滚动

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>