JQuery+CSS实现【返回顶部】按钮，不需要图片jquery
演示效果：
实现代码：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery+CSS实现【返回顶部】按钮</title>
<style type="text/css">
/* Scroll to Top */
.scrollup {
display: none;
width: 42px;
height: 42px;
line-height: 35px;
position: fixed;
bottom: 5%;
right: 5%;
color: #eee;
font-size: 40px;
background: #929292;
text-align: center;
text-decoration: none;
transform: rotate(-90deg);/*旋转*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
opacity:0.85; /*透明*/
filter:alpha(opacity=85);
/* writing-mode: tb-rl;*/
font-family: "Helvetica Neue", "Helvetica", "Arial";
}
.scrollup:hover, .scrollup:focus {
color: #eee;
text-decoration: none;
background: #5b5b5b;
}
</style>
<script src="js/jquery-1.12.0.min.js">
</script>
<script>
(function ($) {
// Fade In and Out when Scroll
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
// Scroll to Top
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 150);
return false;
});
})(jQuery);
</script>
</head>
<body>
<div style="height: 5000px;"></div>
<a href="#" class="scrollup">›</a>
</body>
</html>
使用的时候，可以按照具体需要调整：
1.要改变按钮大小，可以重新设置 CSS 中 width 和 height 的值，同时调整 line-height 与之对应，使向上箭头水平居中。说明：因为箭头使用 › 反转90度实现，所以 line-height 变为设置水平位置，text-align 变为设置垂直居中。
2.要改变按钮位置，可以重新设置 CSS 中 bottom 和 right 的值。
下一篇：jquery双击编辑并保存数据
我要评论