我有这个jQuery来添加一个返回顶部按钮。它很简单,效果很好。我让它作为WordPress MultiSite的插件在大约120个网站上运行。今天我注意到它并非在每个网站上都有效。没有控制台错误,但我的猜测是其他插件或脚本导致冲突。从一个站点到另一个站点不一致,我找不到原因。
如何编写此 jQuery,使其不会遇到兼容性问题?
jQuery(document).ready(function($){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn();
} else {
$(".scrollToTop").fadeOut();
}
});
//Click event to scroll to top
$(".scrollToTop").click(function(){
$("html, body").animate({scrollTop : 0},800);
return false;
});
});
示例站点 1:http://anntowergallery.com/exhibits/不起作用。
示例站点 2:http://iemajen.com/asphaltanimals/作品
我已经在十几个网站上尝试过这个,但无法确定可能导致问题的原因。库网站上的控制台中没有错误。
我感谢任何反馈。
奇怪的错误,你到了那里。
似乎在站点 1 中您有以下 CSS:
body {
overflow-x: hidden;
}
当该 CSS 就位时,$(window).scroll
事件侦听器将不会触发。如果你删除该CSS行,JS工作得很好。
您还可以将滚动事件绑定到body
而不是window
:
$("body").scroll(function(){
...
});
但我记得IE有一些问题。也许您同时绑定$("body").scroll
和$(window).scroll
是最安全的:
jQuery(document).ready(function($){
//Check to see if the window is top if not then display button
$(window).add("body").scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn();
} else {
$(".scrollToTop").fadeOut();
}
});
//Click event to scroll to top
$(".scrollToTop").click(function(){
$("html, body").animate({scrollTop : 0},800);
return false;
});
});
滚动脚本之前,body
标记内有一个 style
元素,该元素无效,可能会阻止脚本执行。尝试将其移动到head
中。
这就是我要说的部分:
<style type="text/css">
.scrollToTop {
/* ... */
}
</style>
我不会在移动设备上使用该代码...窗口滚动的每个刻度都在触发fadeIn
或fadeOut
。最好添加一个标志来检查滚动到顶部按钮是否可见(演示)
jQuery(document).ready(function($) {
var visible = false;
//Check to see if the window is top if not then display button
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (!visible && scrollTop > 100) {
$(".scrollToTop").fadeIn();
visible = true;
} else if (visible && scrollTop <= 100) {
$(".scrollToTop").fadeOut();
visible = false;
}
});
//Click event to scroll to top
$(".scrollToTop").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
});