我最近从 cferdinandi 安装了 smooth-scroll 库平滑滚动功能非常有用。
使用 CMS 添加到我的文本中的 anchor 如下所示:
<span id="authentication" class="ancre"></span>
关于我在文本中谈论的内容,ID 每次都不同。而且效果很好。
我的问题是 smooth-scroll 库在运行时似乎删除了类,因此我的 class='ancre' 在调用 anchor 时不显示。类是:
.ancre:target{
background-color: #131b24;
color: white;
}
所以我做了什么,我删除了我的类的“目标”参数,并在我的 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);
}
但它不起作用,我就是想不通为什么。
您可以通过按“两步验证”和/或“移动”按钮来尝试 on this page .
我不是编码员,更像是设计师,我很乐意在这里得到一些帮助。
谢谢大家的帮助,
最好的, 昆特
最佳答案
无需库即可使用 scrollIntoView javascript 函数。
https://codepen.io/gezzasa/pen/gzXPbJ/
首先我必须将容器设置为 position: relative;
然后将 anchor 设置为 position: absolute;顶部:0;
。将 JS 上的选项设置为 block : 'center'
它现在只会滚动直到 anchor 位于屏幕中间。
var smoothScroll = function(e, me)
是我声明的函数,它在 a
标记的 onclick 上触发。有不同的方法来运行该函数,但这很容易。我在事件的 onclick 上传入了 event
(单击时触发的事件)和 this
以告诉脚本我点击了什么。
e.preventDefault()
将阻止 a 标签触发其默认函数,该函数将使用提供的 href 重新加载页面。在这种情况下,它将附加一个没有该脚本的 ID。
document.querySelector(me.getAttribute('href')) 将获取它需要滚动到的 ID,然后 scrollIntoView
函数将根据您提供的选项滚动。
希望我解释得很好......我没有太多解释 JS 的经验。;
关于javascript - 使用特定的平滑滚动库将类添加到 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50207677/