Smooth Scroll 块锚 link 到其他页面

Question

我正在我的投资组合网站上工作，但我没有让锚 link 工作。

在网站上点击案例查看详细信息，然后我想 link 返回我网站的投资组合部分。我使用锚点来实现此目的，但我的平滑滚动将锚点 link 阻止到另一个页面。（当我只是 link 到索引时我确实工作，但当我添加锚点时没有工作并且当我删除平滑滚动时它也工作）

有谁知道我该如何解决这个问题？

HTML:

<div class="menubalk" id="basic-menubalk">
 <!-- logo -->
 <a href="../index.html" class="logo-link">
  <div class="logo"></div>
 </a>
 <ul class="menu" id="basic-menu">
  <li><a href="../index.html#portfolio" id="margin-menu-rechts">Terug</a></li>
 </ul>
</div>

Javascript:

$(document).ready(function(){
 "use strict";
 $("a").on('click',function(event) {
  if (this.hash !== "") {
   event.preventDefault();
   var hash = this.hash;    
   $('html, body').animate({
    scrollTop: $(hash).offset().top
   }, 800, function(){
    window.location.hash = hash;
   });
  } 
 });
});

Answer 1

问题是您的 JavaScript 代码中的条件。 if (this.hash !== "") { 将对每个包含散列的 link 求值为 true，而不仅仅是当前页面上的散列。

您可以使用：

if (this.attributes.href.value.substr(0, 1) === '#') {

此外，我根本不会使用那个 jQuery 脚本来实现平滑滚动。有一个 W3 标准已经在某些浏览器（例如 Firefox）中运行。对于不支持它的浏览器，您可以使用 polyfill（例如 iamdustan/smoothscroll）。

Smooth Scroll 块锚 link 到其他页面

Smooth Scroll blocks anchor link to other page

html

javascript

anchor

jquery

smooth-scrolling