Question

所以，我的页面中有一个小箭头：

<a href="#" class="scrollToTop"><img src="images/arrow_up.png"></a>

当页面位于顶部时，我想让它不可见，然后，当用户向下滚动时，使其可见，以便用户可以单击返回页面顶部。这个Javascript似乎不起作用：

    $(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});

我也有这个css（工作正常）：

.scrollToTop{
    padding: 1em;
    color: #444;
    position: fixed;
    right: 0;
    bottom: 0;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -ms-transition: -ms-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    z-index: 1;
}

.scrollToTop:hover{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

我得到了一些帮助！：）

Answer 1

不确定您的确切问题是否存在，但将代码复制到JS小提示中会发现，如果页面小于窗口高度，箭头将始终显示。

对此的修复是包含默认display:none，然后在滚动时检查窗口高度。每次检查都会允许页面增长和缩小，并且仍然允许箭头仅在需要时显示。

可以在此JSFiddle看到一个工作示例。

$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        ShowScroll();
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
});
function ShowScroll() {
  if (window.innerHeight < $("body").height())
  {
    var elem = $(".scrollToTop");
    if (elem.css("display") == "none") elem.css("display","inline");
    if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
  } else {
    $(".scrollToTop").css("display","none")
  }
}

根据滚动位置使图像可见/不可见

1 个答案: