JQuery+CSS实现【返回顶部】按钮，不需要图片
【返回顶部】按钮实现起来并不麻烦，有用图片实现的，有用Font Awesome实现的，效果都不错，但是都重了了些。这里我们用JQuery和CSS实现，相对更加轻量，代码也很简单，不需要加载额外的 js 文件。效果如下：
首先，在页面 <body>标签内 任何地方加上下面的HTML节点：
<a href="#" class="scrollup">›</a>
其次，在页面 <head>标签内 加上jquery文件，为方便，可以直接加载百度静态文件中的JQuery：
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
然后，在页面 <head>标签内 加上下面的 Javascript 脚本：
<script type="text/javascript">
(function ($) {
$(document).ready(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>标签内 加上下面的CSS样式：
<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>
使用的时候，可以按照具体需要调整。
- 要改变按钮大小，可以重新设置 CSS 中 width 和 height 的值，同时调整 line-height 与之对应，使向上箭头水平居中。说明：因为箭头使用 › 反转90度实现，所以 line-height 变为设置水平位置，text-align 变为设置垂直居中。
- 要改变按钮位置，可以重新设置 CSS 中 bottom 和 right 的值。
下一篇： 国内外公共CDN静态资源网站大全