平滑滚动阻止锚链接到其他页面

Question

我正在我的投资组合网站上工作，但我没有得到锚链接工作。

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

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

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 !== "") {将评估为true，而不仅仅是当前页面上的哈希值。

相反，你可以使用：

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

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