时间戳

首页 > 解决方案 > 无法在 Google Chrome 上运行的可点击锚导航

javascript - 无法在 Google Chrome 上运行的可点击锚导航

问题描述

我一直在寻找适用于 IE、Firefox、Safari 和 Edge 的 javascript 问题的解决方案。但是当我想在 Chrome 上使用它时，它不起作用。

我已经尝试了几个我在这里找到的解决方案，关于锚滚动，但没有一个工作，也许有人可以找到解决方案？这是我一直在使用的锚的代码。

<div class="link"><div class="name">PersoName</div><a class="scroll" href="#NAMEID"></a></div>

这就是锚应该去的地方

<div class="box" id="NAMEID" style="background:url('https://nsm09.casimages.com/img/2019/02/22//19022209080424648216131014.png')no-repeat center top fixed; background-color: #EEEEEE; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;">

如果您需要查看它的实际效果，这是我的测试：

https://morganpierce1329.tumblr.com/testperso

标签： javascriptjquerygoogle-chromeanchor-scroll

解决方案

我不确定您的问题的根本原因是什么，但四处搜索我找到了解决方法。您可以将以下代码添加到您的 Javascript 中，它应该可以正常工作（在 Chrome 控制台上进行了测试）：

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

推荐阅读