Question

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

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

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

Answer 1

晚会，但这是一个快速入侵的解决方案。还有改进的余地，但你应该得到一般的想法。

http://jsfiddle.net/captray/69BNP/1/

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

Answer 2

你可以在jquery中使用scrolltop方法。

小提琴http://jsfiddle.net/gabrieleromanato/ChDdE/

例如

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

Answer 3

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

我建议使用固定在元素上的位置使其相对于浏览器窗口。

Javascript / jQuery回到顶部脚本

3 个答案: