包含 jquery 页面在加载时褪色时，在同一页面上滚动 id# 无法正常工作

Question

当我包含一个 jquery 页面淡出和淡入时，我在同一页面上的 id# 链接出现问题。当我刚刚拥有纯 html 时，它工作正常。

澄清：我有一个相同的部分，并在顶部的导航区域中有一个链接，该链接向下滚动到页面的下半部分。当 jquery 代码作为单独的 js 文件或作为链接向下滚动的 html 页面的一部分包含时（我想要这样做），但它也会淡出，而我不希望它这样做。

听到 jquery 淡入淡出代码：

jQuery('body').css('display','none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click',function(event){
var thetarget = this.getAttribute('target')
if (thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function(){
jQuery('fade').fadeIn();
},1000)

HTML 代码不起作用

      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" 
href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="about.html">About</a>
      </li>

我是否针对错误的元素。我也尝试过更改，但无济于事。

需要帮助！

Answer 1

提示：不要将事件监听器(onclick)绑定到所有<a></a>标签。只需使用它的特定 ID 或类名将其绑定到一个！

---

所以我编辑了这一行：

jQuery('a').on('click', function(event)

到

jQuery('#about').on('click', function(event)

并将 ID="about" 标签添加到您的链接中。

---

jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
  jQuery('body').fadeIn();
  jQuery('#about').on('click', function(event) {
    var thetarget = this.getAttribute('target')
    if (thetarget != "_blank") {
      var thehref = this.getAttribute('href')
      event.preventDefault();
      jQuery('body').fadeOut(function() {
        window.location = thehref
      });
    }
  });
});
setTimeout(function() {
  jQuery('fade').fadeIn();
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
  <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
  <a id="about" class="nav-link js-scroll-trigger" href="https://google.com">About</a>
</li>

如果您不想要这个结果，编辑会帮助您解决问题。因为至少你完全把我弄糊涂了。让我知道你的问题是什么。 :)