JQuery Scroll MoveTo.js插件问题

Question

我正试图在我的网站上添加scrollTop按钮，但我有一个问题，我想给这个按钮添加一个效果，比如如果scrollTop小于50px，按钮将不可见，我如何用JQuery做到这一点？

我的代码： HTML

<a class="target" href="#" data-mt-duration="800"><i class="fas fa-angle-up"></i></a>

JS代码

const moveTo = new MoveTo({
tolerance: 0,
duration: 800,
easing: 'easeOutQuart'
});
const trigger = document.getElementsByClassName('target')[0];
moveTo.registerTrigger(trigger);

MoveTo.JS插件链接：https://github.com/hsnaydd/moveTo

Answer 1

您可以在jQuery中使用scrollTop((。在窗口滚动位置上使用一个比较运算符与另一个值进行比较，在您的情况下为50px。将其包装在window.onscroll事件中。

$(window).on('scroll', function () {
var windowScrollTop = Math.floor($(window).scrollTop());
if (windowScrollTop < 50) {
// Hide button...

jQuery API：https://api.jquery.com/scrollTop/

示例：https://codepen.io/alexgill/pen/MBQyJe