Javascript/jQuery返回顶部脚本

我正在尝试创建“返回顶部”按钮，将用户带到页面顶部，但我需要它淡入淡出。 当用户处于顶部时，显然它不应该出现，当用户向下滚动一点时，它应该淡入，然后在其返回顶部阈值时淡出。 我在这里尝试了一些工作，下面是一些代码：

<a href="#top"><img src="images/top.png" class="totop" /></a>

<div id="top"></div>
.totop{
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:11;
    position:fixed;
}

托普先生{
位置：绝对位置；
底部：10px；
右：10px；
z指数：11；
位置：固定；
}

---

它实际上对最外层是绝对的，所以它会粘在浏览器的位置上。这很好。但是，我不知道如何使它如上所述淡入/淡出。

您可以在jquery中使用scrolltop方法

拨弄

乙二醇

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（window）.scrollTop（）>10&&！$（'#top'）。是（“：可见”）{//如果用户从顶部滚动了10px，并且元素不可见
$（'顶部'）.fadeIn（300）；
}如果（$（window）.scrollTop（）<10&&$（'#top'）是（“：可见”）的，则为else{
$（'顶部'）。淡出（300）；
}
});
});

---

我建议使用元素上的固定位置，使其相对于Browser窗口。

晚会晚了，但这里有一个快速拼凑的解决方案。有改进的余地，但你应该了解总体情况

---

这只会淡入，当我滚动回topI拼写错误的淡出时不会淡出。它需要一个大写的O。加上这个后，它就可以工作了@用户3495256。不停摆弄

$("button").click(function(){
   alert($("div").scrollTop());
}); 

$(document).ready(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() > 10 && !$('#top').is(":visible") ) { //if user scrolled 10px from the top and element is not visible
            $('#top').fadeIn(300);
        } else if ($(window).scrollTop() < 10 && $('#top').is(":visible")) {
            $('#top').fadeOut(300);
        }
    });
});

var whereYouWantYourButtonToAppear = 200;

$(window).scroll(function(){

    var position = $(window).scrollTop();

    if(position > whereYouWantYourButtonToAppear)
    {
        $('#backToTop').fadeIn();
    }
    else
    {
        $('#backToTop').fadeOut();
    }
});

$('#backToTop').on('click', function(){
    $(window).scrollTop(0);
    $(this).fadeOut();
});