WordPress返回顶部js代码改进版
前几天为博客加了返回顶部、查看评论、转到底部的功能，下面是地址：
WordPress返回顶部、查看评论、转到底部代码
由于使用的是主题下的jquery库，使我的表情插件Wp grins 失效，评论表情不显示了，最终检查是js冲突了，于是，我就改调用wordpress内部jquery库，调用方法：
1 | < ?php wp_enqueue_script("jquery"); ?> |
但要注意的是： wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面。
而且 js 的写法是:
1 2 3 | jQuery(document).ready(function($) { // "$"符号在这里才能被识别 }); |
因为$的位置不对，所以上次的up函数和dn函数不能使用$，因此函数不能使用，于是我改用document.body.scrollTop来设置浏览器的高度，这样确实是可以了，但是在ff和ie下这个js方法又不是适用，所以又被我舍弃了。
无赖之举，只能调用jquery函数了，
下面是调用内部函数的方法，在多个浏览器能够兼容，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | jQuery(document).ready(function($) { $body = window.opera ? "CSS1Compat" == document.compatMode ? $("html") :$("body") :$("html,body"), $("#roll_up").mouseover(function() { $body.up(); }).mouseout(function() { clearTimeout(mk); }).click(function() { $body.animate({ scrollTop:0 }, 400); }); $("#roll_down").mouseover(function() { $body.dn(); }).mouseout(function() { clearTimeout(mk); }).click(function() { $body.animate({ scrollTop:$(document).height() }, 400); }); $("#roll_comment").click(function() { $body.animate({ scrollTop:$("#comment").offset().top }, 400); }); $.fn.up = function() { $(window).scrollTop($(window).scrollTop() - 1), mk = setTimeout("$body.up()", 50); }; $.fn.dn = function() { $(window).scrollTop($(window).scrollTop() + 1), mk = setTimeout("$body.dn()", 50); }; }); |
在这里我就不强调$.fn的用法了，上面的方法能够使用，而且和我的Wp grins兼容。
最后收尾的时候我突然想，为什么一定要调用函数呢？
我何不把setTimeout换成setInterval呢，这样代码就更简便了，于是我又将函数去掉，变成了下面的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | jQuery(document).ready(function($) { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body"); $("#roll_up").mouseover(function() { mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()-1)}, 50); }).mouseout(function() { clearInterval(mk); }).click(function() { $body.animate({scrollTop: 0},400); }); $("#roll_down").mouseover(function() { mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()+1)}, 50); }).mouseout(function() { clearInterval(mk); }).click(function() { $body.animate({scrollTop: $(document).height()},400); }); $("#roll_comment").click(function() { $body.animate({scrollTop: $("#comment").offset().top},400); }); }); |
最后大功告成，但是要注意的是clearInterval使用jquery函数的方法，
1 | mk = setInterval(function(){$(window).scrollTop($(window).scrollTop()-1)}, 50); |
这里不能调用错，这样就完美的解决了滚动代码，而且兼容所有的浏览器。
WP-Syntax代码高亮插件使用方法 查看MySQL数据库的命令详解
[…] 下面js代码的最新改进版： WordPress返回顶部js代码改进版 […]