为什么不是'滚动到顶部'按钮代码工作？

我编写了这个“scrollToTop”按钮，这样当用户向下滚动时，会出现一个按钮，当点击将页面滚动到顶部时。但由于某种原因，它不起作用。为什么不是'滚动到顶部'按钮代码工作？

有被报告到控制台没有语法错误......

问题：我现在看到的是什么，CSS的要细，因为如果我删除显示：无;样式是正确的，按钮显示在正确的位置，但问题是，当我向下滚动页面时，按钮不显示，这意味着JavaScript不应用fadeIn（）;的事情，但我不知道为什么......

HTML

<a href="#" class="scrollToTop"></a>

CSS

.scrollToTop{ 
    width:75px; 
    height:75px; 
    padding:10px; 
    text-align:center; 
    text-decoration: none; 
    position:fixed; 
    top:100px; 
    right:40px; 
    opacity:0.5; 
    display:none; 
    background: url('images/scroll_up.png') no-repeat 0px 0px; 
    background-size: 75px 75px; 
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ 
    transition: all 0.3s; 
} 

.scrollToTop:hover{ 
    text-decoration:none; 
    top:90px; 
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ 
    transition: all 0.3s; 
}

的JavaScript/jQuery的

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

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

来源

2014-12-19 NepsName

你有充分的滚动事件后检查当前滚动位置：

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

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

EXAMPLE

来源

2014-12-19 11:18:37 friedi

这应该工作包，并为小提琴表演，它的工作，但在我的网站，它不......图像没有显示，控制台不报告任何东西......：\ – NepsName 2014-12-19 11:33:47

好吧，它现在正在工作，我想出了问题，问题是我已经设置了overflow-x：隐藏到html/body，由于某种原因打破了这段代码。无论如何感谢您的帮助！ – NepsName 2014-12-19 11:54:03

这

if ($(this).scrollTop() > 100) { 
    $('.scrollToTop').fadeIn(); 
} else { 
    $('.scrollToTop').fadeOut(); 
}

才会被调用一次，当准备好文档的代码部分。你需要检查这为用户向上和向下滚动，例如，你可以在窗口中滚动事件

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

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

来源

2014-12-19 11:18:51 MLeFevre

为什么不是'滚动到顶部'按钮代码工作？

回答

相关问题