一共就两个代码,一个是js加入到你网站main.js主要的js代码文件里面。
另一个是css,也是一样的加到网站后台或者是main.css文件里面都可以。
随着鼠标滚轮的滑动,根据屏幕当前的网页位置来判定你处于网页中的百分比那个地方,鼠标点击一下(hover获取焦点)就会显示一个回顶部提示文字并自动的返回顶部(#)。
为什么我要说明(hover获取焦点),因为有的网友和我说手机浏览器点击返回顶部后,再往下浏览拖动不会显示回来百分比,也正是因为(hover获取焦点)方式,所以需要你再次随便点击一下网页的其它部分就会显示回来了,不过没关系,正常的阅读者应该不会无聊到纠结或者玩这个百分比返回顶部吧!
CSS代码
/*返回顶部%css*/ #backtoTop { background-color:rgba(84,82,82,0.15);/*背景颜色,后面0.15是透明度*/ border-radius:100%; bottom:10%; /*圆角、下距*/ height:33px; position:fixed; right:-100px; width:33px; transition:0.5s; -webkit-transition:0.5s } #backtoTop.button--show { right:2px } /*边距*/ .per { font-size:16px; height:30px; line-height:30px; position:absolute; text-align:center; top:0; width:33px; color:#CD0000; /*文字颜色*/ cursor:pointer } .per:before { content:attr(data-percent) } .per:hover:before { content:"↑"; font-size:15px } /*文字大小*/
JS代码
/*百分比返回顶部JS*/ var bigfa_scroll = { drawCircle: function(id, percentage, color) { var width = $(id).width(); var height = $(id).height(); var radius = parseInt(width / 2.20); var position = width; var positionBy2 = position / 2; var bg = $(id)[0]; id = id.split("#"); var ctx = bg.getContext("2d"); var imd = null; var circ = Math.PI * 2; var quart = Math.PI / 2; ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineCap = "square"; ctx.closePath(); ctx.fill(); ctx.lineWidth = 2; //转动圈线条大小 imd = ctx.getImageData(0, 0, position, position); var draw = function(current, ctxPass) { ctxPass.putImageData(imd, 0, 0); ctxPass.beginPath(); ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false); ctxPass.stroke(); } draw(percentage / 100, ctx); }, backToTop: function($this) { $this.click(function() { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }, scrollHook: function($this, color) { color = color ? color: "#050505"; $this.scroll(function() { var docHeight = ($(document).height() - $(window).height()), $windowObj = $this, $per = $(".per"), percentage = 0; defaultScroll = $windowObj.scrollTop(); percentage = parseInt((defaultScroll / docHeight) * 100); var backToTop = $("#backtoTop"); if (backToTop.length > 0) { if ($windowObj.scrollTop() > 200) { backToTop.addClass("button--show"); } else { backToTop.removeClass("button--show"); } $per.attr("data-percent", percentage); bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color); } }); } } $(document).ready(function() { $("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="33" height="33"></canvas><div class="per"></div></div>'); var T = bigfa_scroll; T.backToTop($("#backtoTop")); T.scrollHook($(window), "#050505");/*外圈进度条颜色*/ }); /*百分比返回顶部JS,33大小是整个圈圈大小,对应CSS代码也需要修改*/
引入JS和CSS
<script type="text/javascript" src="http://00625.cc/xxx/main.js"></script> <link rel="stylesheet" href="http://00625.cc/xxx/main.css" />
还没有评论,来说两句吧...