在页面的实际实现中,链接随页面一起移动但未在页面中显示(可见)。当我在浏览器中单击css时,元素将出现在滚动位置。
//elemet to appear when scrolling
<a href="#" class="scrollup">Scroll</a>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
//css for the element
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
}
不使用chrome。在firefox工作。
答案 0 :(得分:0)
尝试:
$('.scrollup').click(function(){
$( 'html, body' ).animate( { scrollTop: $('body').offset().top }, 'slow' ); return false;
});
或者
$('.scrollup').click(function(){
$('body').scrollTop($('body')
});
答案 1 :(得分:0)
这就是你想要的
JS
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$(".scrollup").click(function () {
//1 second of animation time
//html works for FFX but not Chrome
//body works for Chrome but not FFX
//This strange selector seems to work universally
$("html, body").animate({scrollTop: 0}, 1000);
});
HTML
<a href="#" class="scrollup">Scroll</a>
css
.scrollup{
padding: 5px 3px;
background: #000;
color: #fff;
position: fixed;
bottom: 0;
right: 5px;
display: none;
}
工作demo
希望这有助于你