Question

我必须制作一个＆＃34;滚动到顶部＆＃34;按钮，我已经编写了HTML，CSS和主脚本。

HTML

<a href="#" class="scrollup">Наверх</a>

的jQuery

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

和CSS

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

但由于某种原因，.scrollTop()方法不起作用。即使我尝试调用alert()（而其他jQuery方法工作正常）

P.S。在jsfiddle中，此代码可以正常工作

Answer 1

确保此代码不与任何脚本冲突

尝试以下

if ($(this).scrollTop() != 0)

而不是

if ($(this).scrollTop() > 100)

见这个

$(document).ready(function(){
    $(window).scroll(function () {  
        if ($(this).scrollTop() != 0) {
            $('.scrollup').fadeIn();
        } else { 
            $('.scrollup').fadeOut();
        }
    }); 
    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

确保不与任何事情发生冲突。

Answer 2

您需要首先包含jquery，然后才能调用其函数。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.scrollup').fadeIn();
    } else {
      $('.scrollup').fadeOut();
    }
  });
  $('.scrollup').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 600);
    return false;
  });
});
</script>
<style>
.scrollup {
  width: 40px;
  height: 40px;
  opacity: 1;
  position: fixed;
  bottom: 50px;
  right: 100px;
  /* display:none; */
  /* text-indent:-9999px; */
  background: url('icon_top.png') no-repeat;
}
</style>


<img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
<img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
<a href="#" class="scrollup">Наверх</a>

＆＃13;

jQuery scrollTop（）方法不起作用

2 个答案: