为博客添加返回顶部按钮

由于主题没有自带的返回顶部按钮,所以我一直在寻找一种解决方案。之前使用的是wordpress插件提供的返回顶部按钮,后来在网上乱逛,发现有Xnces – 衔铁部落的返回顶部按钮非常的酷炫,正是我要寻找的。于是,我在那个博客下留言询问制作方法。
前几天,看到那个博客上出现了一篇文章-本博客的返回顶部效果
按照上面的方法,折腾一会儿,我也制作出来了,特地记录一下。

  1. 首先,先加载一下环境。在后台functions.php中找到ms_scripts()函数,添加wp_enqueue_script( 'jquery' );调用wordpress默认的JQuery文件。

  2. 我将这个效果有关的js代码放在了主题目录下新建的themes.js文件中。所以在上面的函数中添加下面两句话导入这个文件wp_register_script( 'themes_js', THEMEPATH . '/themes.js',array());wp_enqueue_script( 'themes_js' );

  3. CSS代码我直接加在了主题style.css中。

  4. 重新打开网站就能看到效果了。

themes.js文件中代码如下

  1. var bigfa_scroll = {
  2. drawCircle: function(id, percentage, color) {
  3. var width = jQuery(id).width();
  4. var height = jQuery(id).height();
  5. var radius = parseInt(width / 2.20);
  6. var position = width;
  7. var positionBy2 = position / 2;
  8. var bg = jQuery(id)[0];
  9. id = id.split("#");
  10. var ctx = bg.getContext("2d");
  11. var imd = null;
  12. var circ = Math.PI * 2;
  13. var quart = Math.PI / 2;
  14. ctx.clearRect(0, 0, width, height);
  15. ctx.beginPath();
  16. ctx.strokeStyle = color;
  17. ctx.lineCap = "square";
  18. ctx.closePath();
  19. ctx.fill();
  20. ctx.lineWidth = 3;
  21. imd = ctx.getImageData(0, 0, position, position);
  22. var draw = function(current, ctxPass) {
  23. ctxPass.putImageData(imd, 0, 0);
  24. ctxPass.beginPath();
  25. ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
  26. ctxPass.stroke();
  27. }
  28. draw(percentage / 100, ctx);
  29. },
  30. backToTop: function($this) {
  31. $this.click(function() {
  32. jQuery("body,html").animate({
  33. scrollTop: 0
  34. },
  35. 800);
  36. return false;
  37. });
  38. },
  39. scrollHook: function($this, color) {
  40. color = color ? color: "#000000";
  41. $this.scroll(function() {
  42. var docHeight = (jQuery(document).height() - jQuery(window).height()),
  43. $windowObj = $this,
  44. $per = jQuery(".per"),
  45. percentage = 0;
  46. defaultScroll = $windowObj.scrollTop();
  47. percentage = parseInt((defaultScroll / docHeight) * 100);
  48. var backToTop = jQuery("#backtoTop");
  49. if (backToTop.length > 0) {
  50. if ($windowObj.scrollTop() > 200) {
  51. backToTop.addClass("button--show");
  52. } else {
  53. backToTop.removeClass("button--show");
  54. }
  55. $per.attr("data-percent", percentage);
  56. bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
  57. }
  58. });
  59. }
  60. }
  61. jQuery(document).ready(function() {
  62. jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
  63. var T = bigfa_scroll;
  64. T.backToTop(jQuery("#backtoTop"));
  65. T.scrollHook(jQuery(window), "#555555");
  66. });

CSS文件要添加的代码

  1. #backtoTop{
  2. background-color:#eee;
  3. border-radius:100%;
  4. bottom:10%;height:48px;
  5. position:fixed;
  6. right:-100px;
  7. width:48px;
  8. transition:0.5s;
  9. -webkit-transition:0.5s
  10. }
  11. #backtoTop.button--show{
  12. right:10px
  13. }
  14. .per{
  15. font-size:16px;
  16. height:48px;
  17. line-height:48px;
  18. position:absolute;
  19. text-align:center;
  20. top:0;
  21. width:48px;
  22. color:#555;
  23. cursor:pointer
  24. }
  25. .per:before{
  26. content:attr(data-percent)
  27. }
  28. .per:hover:before{
  29. content:"↑";font-size:20px
  30. }

相关日志

发表评论

电子邮件地址不会被公开。 必填项已用*标注