[英]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.