feling.net/_includes/goTop.html

67 lines
1.6 KiB
HTML

<script>
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 400)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('#content').scroll(function() {
if ($('#content').scrollTop() > 400)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body, #content').animate({scrollTop: 0}, 400);
});
});
</script>
<style>
div.go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 100px;
right: 1%;
border: 1px solid #3399ff;
width: 38px;
height: 38px;
background-color: #ffffff;
border-radius: 3px;
cursor: pointer;
}
div.go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div.go-top div.arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #3399ff;
}
div.go-top div.stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #3399ff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
</style>
<div class="go-top">
<div class="arrow"></div>
<div class="stick"></div>
</div>