[英]Smooth Scroll blocks anchor link to other page
I am working on my portfolio website but I don't get the anchor links to work. 我正在我的投资组合网站上工作,但没有锚链接可以工作。
On the website you click on a case to view the details and after that I want to link back to the portfolio part of my website. 在网站上,单击案例以查看详细信息,然后我要链接回我网站的投资组合部分。 I used anchor points to achieve this but my smooth scrolling is blocking the anchor links to another page.
我使用锚点来实现此目的,但是我的平滑滚动阻止了指向另一页的锚点链接。 (I does work when I just link to the index but not when I add the anchor point & it also works when I remove the smooth scroll)
(我只是在链接到索引时才起作用,但在添加锚点时却不起作用,并且在删除平滑滚动时也起作用)
Does anyone know how I can fix this problem? 有谁知道我该如何解决这个问题?
HTML: 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: 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;
});
}
});
});
The problem is the condition in your JavaScript code. 问题出在您的JavaScript代码中。
if (this.hash !== "") {
will evaluate to true for every link that contains a hash, not just the ones on your current page. if (this.hash !== "") {
对于每个包含散列的链接,而不仅仅是当前页面上的链接,其求值为true 。
Instead you could use: 相反,您可以使用:
if (this.attributes.href.value.substr(0, 1) === '#') {
Additionally, I would not use that jQuery script for smooth scrolling at all. 此外,我完全不会使用jQuery脚本进行平滑滚动。 There is a W3 standard that already works in some browsers (eg Firefox).
有一些浏览器(例如Firefox)已经可以使用的W3标准。 And for the browsers that do not support it, you can use a polyfill (eg iamdustan/smoothscroll ).
对于不支持它的浏览器,可以使用polyfill (例如iamdustan / smoothscroll )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.