JQuery Scroll MoveTo.js 插件问题答案

【问题标题】：JQuery Scroll MoveTo.js plugin issueJQuery Scroll MoveTo.js 插件问题
【发布时间】：2018-07-31 07:47:07
【问题描述】：

我正在尝试在我的网站上添加 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

【问题讨论】：

标签： javascript jquery html plugins

【解决方案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

【讨论】：