平滑滚动链接与锚点

Question

我正在寻找如何为链接添加平滑滚动的方法，例如example.com/subpage#anchor。我正在尝试使用此代码

 $(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500);
});

但它不适用于example.com/subpage#anchor

Answer 1

实际上，您的逻辑似乎运行正常，没有任何修改。

＆＃13;

＆＃13;

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

＆＃13;

#container menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background-color: rgb(128, 128, 128);
}

menu li {
  display: inline-block;
  min-width: 32.75%;
  text-align: center;
  background-color: rgb(152, 152, 152);
}

#home,
#aboutUs,
#contact {
  display: block;
  min-height: 600px;
}

#home {
  background-color: red;
  margin-top: 19px;
}

#aboutUs {
  background-color: green;
}

#contact {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <menu>
    <li><a href="#home">Home</a></li>
    <li><a href="#aboutUs">About Us</a></li>
    <li><a href="#contact">Contact Us</a></li>
  </menu>

  <div id="home"></div>
  <div id="aboutUs"></div>
  <div id="contact"></div>
</div>

＆＃13;

＆＃13;

＆＃13;