javascript - 滚动回到顶部链接在第一次加载时可见

Question

大家好，我正在尝试让这个滚动到顶部的链接正常工作。

主要代码有效，但链接在页面最初加载时可见。 Here是一个链接，因此您可以理解我的意思。

Javascript

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.backtop').fadeIn();
  } else {
    $('.backtop').fadeOut();
  }
})

CSS

.backtop{
  position: fixed;
  z-index: 9999;
  bottom: 50px;
  right: 5%;
}

Answer 1

它需要从一个隐藏它的css属性开始

.backtop{
  display: none; /* add this */
  position: fixed;
  z-index: 9999;
  bottom: 50px;
  right: 5%;
}

您的代码也存在一些非常糟糕的性能问题:

无论是否需要，都会为每个滚动事件调用 fadeIn 或 fadeOut。尝试这样的事情:

var isHidden = true;
$(document).scroll(function() {
    var newScrollTop = $(this).scrollTop();
    if (newScrollTop > 800 && isHidden) {
        $(".backtop").fadeIn();
        isHidden = false;
    }
    else if (newScrollTop <= 800 && !isHidden) {
        $(".backtop").fadeOut();
        isHidden = true;
    }
});

通过监控按钮的状态，您可以仅在必要时调用淡入淡出命令。

滚动事件在不同平台上的行为不一致并且偶尔触发。

随着浏览器对 requestAnimationFrame 支持的改进，用它来监控滚动位置会更好。无需等待滚动事件，当浏览器呈现帧时，您只需检查滚动位置是否已更改。如果有，显示或隐藏您的按钮。

var scroll = function() {
    requestAnimationFrame(scroll);
    myToTopLogicFunction();
};