使用特定的平滑滚动库将类添加到 Anchor

Question

我最近安装了 cferdinandi 的平滑滚动库，平滑滚动功能就像一个魅力。

使用 CMS 添加到我的文本中的锚点如下所示：

<span id="authentication" class="ancre"></span>

关于我在文本中谈论的内容，ID 每次都不同。而且效果很好。

我的问题是，平滑滚动库似乎在运行时删除了该类，因此我的 class='ancre' 在调用锚点时不会显示。班级是：

.ancre:target{
    background-color: #131b24;
    color: white;
}

所以我删除了类的“target”参数，并在 JS 文件中添加了一个函数，以便在平滑滚动运行后添加该类。看起来像这样：

css/app.css 中的 CSS

.ancre{
    background-color: #131b24;
    color: white;
}

js/app.js 中的 JS

after: function () {
    var className = 'ancre';
    document.querySelector('.' + className).classList.remove(className);
    document.getElementById(anchor.id).classList.add(className);
}

但是它不起作用，我就是不明白为什么。

您可以通过按此页面上的“两步身份验证”和/或“移动”按钮来尝试。

Answer 1

您可以使用scrollIntoView javascript 函数，无需库。

https://codepen.io/gezzasa/pen/gzXPbJ/

首先我必须将容器设置为

position: relative;

，然后将锚点设置为

position: absolute; top: 0;

。将 JS 上的选项设置为 

block : 'center'

 现在，它只会滚动直到锚点位于屏幕中间。

var smoothScroll = function(e, me)

 是我声明的函数，并在 

a

 标签的 onclick 上触发。有不同的方法来运行该函数，但这很简单。我在事件的 onclick 上传入了 

event

（单击时触发的事件）和 

this

 来告诉脚本我点击了什么。

e.preventDefault()

 将阻止 a 标签触发其默认函数，该函数将使用提供的 href 重新加载页面。在这种情况下，它将附加一个没有该脚本的 ID。

document.querySelector(me.getAttribute('href')) 将获取需要滚动到的 ID，然后

scrollIntoView

 函数将根据您提供的选项进行滚动。

希望我解释得很好...我没有太多解释 JS 的经验。；