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

或者您甚至可以隐藏按钮，正如ZZ先生在评论中提到的那样。

Answer 2

试试此代码

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

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

3 个答案: