Question

在线发现此代码，但我唯一要做的就是将Jquery修改为停止滚动时淡出的位置，并在开始滚动时淡入淡出。

另外，我希望我的按钮位于屏幕的最右下方。这是代码。任何帮助将不胜感激。

HTML：

<a href="index.html" class="scrollToTop"></a>

JQuery的：

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

});
</script>

CSS：

.scrollToTop{
    width:100px; 
    height:130px;
    padding:5px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:5px;
    right:5px;
    display:none;
    background: url('images/UpArrow_tab.png') no-repeat 0px 0px;
}

    .scrollToTop:hover{
    text-decoration:none;
    background: url('images/UpArrow_tab_hover.png') no-repeat 0px 0px;
}

Answer 1

这样的事情应该有效：

http://codepen.io/anon/pen/VYJgbq

var action;

$(window).scroll(function() {

  clearTimeout(action);
  scrollEnd();
});

function scrollEnd() {

  action = setTimeout(function() {

    if ($(window).scrollTop() > 100) $('.scrollToTop').fadeIn();
    else $('.scrollToTop').fadeOut();
  }, 200);
}

这种变化显示出更快一点：

http://codepen.io/anon/pen/RNzvgO

var scrollit = $('.scrollToTop'), action;

$(window).scroll(function() {

  clearTimeout(action);
  scrollEnd();

  if ($(this).scrollTop() > 100 && !scrollit.is('visible')) scrollit.fadeIn();
});

function scrollEnd() {

  action = setTimeout(function() {

    if ($(window).scrollTop() <= 100) scrollit.fadeOut();
  }, 200);
}

Answer 2

如果您想在窗口scrollTop大于100时显示scrollToTop链接，那么您可以使用此javascript代码：

<script>
$(document).ready(function(){
    var $scrollToTop=$('.scrollToTop');//for better performance
    var isScrollToTopVisible=false;

    //Useful for F5 key when page scroll is in the middle
    setTimeOut(function(){
        if($(window).scrollTop()>100)
        {
            $scrollToTop.fadeIn();
            isScrollToTopVisible=true;
        }
    },500)

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        var scrollTop=$(this).scrollTop()
        if (isScrollToTopVisible==false && scrollTop > 100) {
            $scrollToTop.fadeIn();
            isScrollToTopVisible=true;
        }
        else if (isScrollToTopVisible && scrollTop<=100) {
            $scrollToTop.fadeOut();
            isScrollToTopVisible=false;
        }
    });

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

});
</script>

JQuery Animated scroll Fade In / Fade Out问题

2 个答案: