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

【问题标题】：Smooth Scroll blocks anchor link to other page平滑滚动阻止锚链接到其他页面
【发布时间】：2017-12-13 16:13:43
【问题描述】：

我在我的作品集网站上工作，但我没有让锚链接工作。

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

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

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;
   });
  } 
 });
});

【问题讨论】：

animated scrolling script prevents local anchor positions to be accessed from external links的可能重复

标签： javascript jquery html anchor smooth-scrolling

【解决方案1】：

问题在于您的 JavaScript 代码中的条件。 if (this.hash !== "") { 将为每个包含哈希的链接评估为 true，而不仅仅是当前页面上的链接。

你可以使用：

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

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

【讨论】：