为什么不是'滚动到顶部'按钮代码工作?
问题描述:
我编写了这个“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;
});
});
答
你有充分的滚动事件后检查当前滚动位置:
$(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;
});
});
答
这
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;
});
});
这应该工作包,并为小提琴表演,它的工作,但在我的网站,它不......图像没有显示,控制台不报告任何东西......:\ – NepsName 2014-12-19 11:33:47
好吧,它现在正在工作,我想出了问题,问题是我已经设置了overflow-x:隐藏到html/body,由于某种原因打破了这段代码。无论如何感谢您的帮助! – NepsName 2014-12-19 11:54:03