ページの実際の実装では、リンクはページとともに移動しますが、ページには表示されません (表示されません)。ブラウザで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;
}
クロムでは動作しません。ファイアフォックスでの作業。