jQuery滚动到顶部显示按钮而不滚动页面

Question

您好，我的代码看起来不错，但我不知道为什么它在不滚动页面的情况下可见。

jQuery(document).ready(function($){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.TopButton').fadeIn();
        } else {
            $('.TopButton').fadeOut();
        }
    });
    //Click event to scroll to top
    $('.TopButton').click(function(){
        $('html, body').animate({scrollTop : 0},360);
        return false;
    });
});

所以，我使用了if ($(this).scrollTop() > 100，但是当我打开页面时，它会显示按钮而不滚动页面。当我滚动页面并返回顶部其工作并隐藏按钮时。

你知道我做错了什么吗？

Answer 1

试试这个代码

jQuery(document).ready(function($){

    // hide the topbutton on page load/ready.
    $('.TopButton').hide();

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.TopButton').show().fadeIn();
        } else {
            $('.TopButton').fadeOut().hide();
        }
    });
    //Click event to scroll to top
    $('.TopButton').click(function(){
        $('html, body').animate({scrollTop : 0},360);
        return false;
    });
});

Answer 2

当用户在指定元素中滚动时发生滚动事件。

所以，在加载文档时检查滚动条的位置。

jQuery(document).ready(function($){
    //check if window scroll is < 100
    if($(window).scrollTop() < 100){
         $('.TopButton').fadeOut().hide();
    }
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.TopButton').show().fadeIn();
        } else {
            $('.TopButton').fadeOut().hide();
        }
    });
    //Click event to scroll to top
    $('.TopButton').click(function(){
        $('html, body').animate({scrollTop : 0},360);
        return false;
    });
});

或者你甚至可以默认隐藏按钮，正如评论中提到的 Mr.ZZ。

Answer 3

你必须检查 scrollTop 是否准备就绪，现在你只在滚动时这样做。

jQuery(document).ready(function($){
  //Check to see if the window is top if not then display button
  toggleButton()
  $(window).scroll(toggleButton);
  //Click event to scroll to top
  $('.TopButton').click(function(){
    $('html, body').animate({scrollTop : 0},360);
    return false;
  });
});

function toggleButton() {
  if ($(window).scrollTop() > 100) {
    $('.TopButton').fadeIn();
  } else {
    $('.TopButton').fadeOut();
  }
}