![](/img/trans.png)
[英]The document.location.href is not working in Chrome browser
[英]Href tag not working in chrome but working in other browser
我正在設計網站,但遇到的問題是href#標簽在chrome中不起作用,但在firefox中起作用
<ul class="navigation" style="margin-top: 75px;"> <li><a class="scroll-to" href="#section-1">Home</a></li> <li><a class="scroll-to" href="#section-2">About Us</a></li> <li><a class="scroll-to" href="#section-4">Products</a></li> <li><a class="scroll-to" href="#section-5">Clients</a></li> <li><a class="scroll-to" href="#section-6">Team</a></li> <li><a class="scroll-to" href="#section-7">Contact Us</a></li> </ul> <section id="section-1" class="banner-container color-light center nav-trigger">
我不確定哪里出了問題
以下內容對我在Chrome 62中正常工作。您是否要關閉部分標簽? 您確定有足夠的高度可以實際滾動嗎?
section { padding: 100px; border: 1px solid blue; }
<ul> <li><a href="#section-1">Home</a></li> <li><a href="#section-2">About Us</a></li> <li><a href="#section-4">Products</a></li> <li><a href="#section-5">Clients</a></li> <li><a href="#section-6">Team</a></li> <li><a href="#section-7">Contact Us</a></li> </ul> <section id="section-1">Home</section> <section id="section-2">About Us</section> <section id="section-4">Products</section> <section id="section-5">Clients</section> <section id="section-6">Team</section> <section id="section-7">Contact Us</section>
您可以嘗試遵循此步驟。 https://www.gregoryvarghese.com/chrome-anchor-link-not-working-fix/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
確保每個div有足夠的高度,以便頁面可以滾動。 沒有頁面滾動,您將看不到更改,因為您的代碼沒有錯。
<ul>
<li><a href="#section-1">Home</a></li>
<li><a href="#section-2">About Us</a></li>
<li><a href="#section-4">Products</a></li>
<li><a href="#section-5">Clients</a></li>
<li><a href="#section-6">Team</a></li>
<li><a href="#section-7">Contact Us</a></li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>
我猜這是某些版本的Chrome中的一個錯誤,此解決方法對我來說很成功,祝您好運! -
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
對我來說,是href
重定向到帶有主題標簽的頁面,所以我做了以下解決方法:
$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
e.preventDefault();
window.location.href = $(this).attr('href');
window.location.reload();
return false;
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.