Question

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

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

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

每次ID都不同，关于我在文中谈论的内容。它工作正常。

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

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

所以我做了它，我删除了＆＃34;目标＆＃34;我的类的参数，并在我的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);
}

但它不起作用，我只是无法弄清楚原因。

您可以按下按钮＆＃34; 2步验证＆＃34;和/或＆＃34;移动＆＃34; on this page

我不是编码员，更像是设计师，我很乐意在这里得到一些帮助。

谢谢大家的帮助，

最佳， Kwint

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（＆＃39; href＆＃39;））将获取滚动到的所需ID，然后scrollIntoView函数将根据您提供的选项滚动

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

使用特定的平滑滚动库

1 个答案: