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

因此，我的页面中有一个小箭头：

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

我还有一个css（正在运行）：

---

我非常感谢你的帮助！：）

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

对此的一个修复方法是包括一个默认的

显示：none

，然后检查滚动窗口的高度。每次检查它将允许页面增长和收缩，并且仍然允许箭头仅在需要时显示

在这里可以看到一个工作示例

$（文档）.ready（函数（）{
//检查窗口是否在顶部，如果不是，则显示按钮
$（窗口）。滚动（函数（）{
showcoll（）；
});
//单击事件以滚动到顶部
$（'.scrollToTop'）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，800）；
返回false；
});
函数ShowScroll（）{
如果（window.innerHeight<$（“body”）.height（））
{
var elem=$（“.scrollToTop”）；
if（elem.css（“display”）=“none”）elem.css（“display”、“inline”）；
如果（$（this）.scrollTop（）>100）{
$（'.scrollToTop'）.fadeIn（）；
}否则{
$（'.scrollToTop'）.fadeOut（）；
}
}否则{
$（“.scrollToTop”）.css（“显示”、“无”）
}
}

我建议使用类似的js插件，这比构建自己的插件要容易得多。有什么问题吗？你添加了jquery引用吗？就像@FarzinKanzi所说的，看起来你忘记在代码中添加

jquery

引用了。请检查这把小提琴（）在这里，我添加了

jQuery

，您的代码可以正常工作，无需任何修改。我还添加了

$（'.scrollToTop'）.hide（）；

，以便默认情况下隐藏箭头。

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

});

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

$(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")
  }
}