JQuery+CSS实现【返回顶部】按钮,不需要图片
【返回顶部】按钮实现起来并不麻烦,有用图片实现的,有用FontAwesome实现的,效果都不错,但是都重了了些。这里我们用JQuery和CSS实现,相对更加轻量,代码也很简单,不需要加载额外的js文件。效果如下:
首先,在页面<body>标签内任何地方加上下面的HTML节点:
<ahref="#">›</a>
其次,在页面<head>标签内加上jquery文件,为方便,可以直接加载百度静态文件中的JQuery:
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
然后,在页面<head>标签内加上下面的 Javascript脚本:
<scripttype="text/javascript"> (function($){ $(document).ready(function(){ //FadeInandOutwhenScroll $(window).scroll(function(){ if($(this).scrollTop()>100){ $('.scrollup').fadeIn(); }else{ $('.scrollup').fadeOut(); } }); //ScrolltoTop $('.scrollup').click(function(){ $("html,body").animate({scrollTop:0},150); returnfalse; }); }); })(jQuery); </script>
在页面<head>标签内加上下面的CSS样式:
<styletype="text/css"> /*ScrolltoTop*/ .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:"HelveticaNeue","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的值。