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();
};

首次加载时可以看到滚动回顶部链接

1 个答案: