簡體   English   中英

平滑滾動塊將鏈接錨定到其他頁面

[英]Smooth Scroll blocks anchor link to other page

我正在我的投資組合網站上工作,但沒有錨鏈接可以工作。

在網站上,單擊案例以查看詳細信息,然后我要鏈接回我網站的投資組合部分。 我使用錨點來實現此目的,但是我的平滑滾動阻止了指向另一頁的錨點鏈接。 (我只是在鏈接到索引時才起作用,但在添加錨點時卻不起作用,並且在刪除平滑滾動時也起作用)

有誰知道我該如何解決這個問題?

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

問題出在您的JavaScript代碼中。 if (this.hash !== "") {對於每個包含散列的鏈接,而不僅僅是當前頁面上的鏈接,其求值為true

相反,您可以使用:

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

此外,我完全不會使用jQuery腳本進行平滑滾動。 有一些瀏覽器(例如Firefox)已經可以使用的W3標准。 對於不支持它的瀏覽器,可以使用polyfill (例如iamdustan / smoothscroll )。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM