上下滚动不起作用
Scrolling top-bottom is not working
我的滚动有问题,if
条件中的 2 个在延迟一段时间后一直激活。我不明白为什么。这是我遇到问题的网站:www.fitfaza.pl - 右下角的灰色锚点。
代码:
// hide #back-top first
jQuery("#back-top").hide();
jQuery("#back-top2").hide();
// fade in #back-top
jQuery(function() {
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 500) {
jQuery('#back-top').fadeIn();
jQuery('#back-top2').fadeIn();
} else {
jQuery('#back-top').fadeOut();
jQuery('#back-top2').fadeOut();
}
});
jQuery('#back-top a').click(function() {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 1089) {
jQuery('#back-top2 a').click(function() {
jQuery('body,html').animate({
scrollTop: 3390
}, 800);
return false;
});
$("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
$('html, body').stop();
});
};
if (scroll >= 3390) {
jQuery('#back-top2 a').click(function() {
jQuery('body,html').animate({
scrollTop: 1
}, 800);
return false;
});
$("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
$('html, body').stop();
});
};
});
});
这是一个似乎有效果的优化脚本 - 尽管我无法在不轻松删除当前活动脚本的情况下很好地测试站点上的实际响应。因此,您可能需要对其进行测试并就其功能提供一些反馈。无论如何,尝试用这个替换:
http://codepen.io/anon/pen/pvMmyJ?editors=001
$(function () {
var gate = $(window);
var root = $('html, body');
var backtop = $('#back-top2');
var scroll;
backtop.hide();
gate.scroll(function() {
scroll = gate.scrollTop();
if (scroll >= 500 && !backtop.is(':visible')) backtop.fadeIn();
if (scroll < 500 && backtop.is(':visible')) backtop.fadeOut();
});
backtop.click(function() {
if (scroll < 1090) root.animate({scrollTop: 3390}, 800);
if (scroll >= 3390) root.animate({scrollTop: 0}, 800);
});
root.on('scroll mousedown touchstart DOMMouseScroll mousewheel keyup', function() {
root.stop();
});
});
查看站点的页面源代码,锚图像周围的 <a>
标记并不是真正必要的。而且 $
似乎不是保留字符,因此不需要对对象使用 jQuery
。缓存一些重复使用的变量也可以稍微优化脚本。
我的滚动有问题,if
条件中的 2 个在延迟一段时间后一直激活。我不明白为什么。这是我遇到问题的网站:www.fitfaza.pl - 右下角的灰色锚点。
代码:
// hide #back-top first
jQuery("#back-top").hide();
jQuery("#back-top2").hide();
// fade in #back-top
jQuery(function() {
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 500) {
jQuery('#back-top').fadeIn();
jQuery('#back-top2').fadeIn();
} else {
jQuery('#back-top').fadeOut();
jQuery('#back-top2').fadeOut();
}
});
jQuery('#back-top a').click(function() {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 1089) {
jQuery('#back-top2 a').click(function() {
jQuery('body,html').animate({
scrollTop: 3390
}, 800);
return false;
});
$("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
$('html, body').stop();
});
};
if (scroll >= 3390) {
jQuery('#back-top2 a').click(function() {
jQuery('body,html').animate({
scrollTop: 1
}, 800);
return false;
});
$("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
$('html, body').stop();
});
};
});
});
这是一个似乎有效果的优化脚本 - 尽管我无法在不轻松删除当前活动脚本的情况下很好地测试站点上的实际响应。因此,您可能需要对其进行测试并就其功能提供一些反馈。无论如何,尝试用这个替换:
http://codepen.io/anon/pen/pvMmyJ?editors=001
$(function () {
var gate = $(window);
var root = $('html, body');
var backtop = $('#back-top2');
var scroll;
backtop.hide();
gate.scroll(function() {
scroll = gate.scrollTop();
if (scroll >= 500 && !backtop.is(':visible')) backtop.fadeIn();
if (scroll < 500 && backtop.is(':visible')) backtop.fadeOut();
});
backtop.click(function() {
if (scroll < 1090) root.animate({scrollTop: 3390}, 800);
if (scroll >= 3390) root.animate({scrollTop: 0}, 800);
});
root.on('scroll mousedown touchstart DOMMouseScroll mousewheel keyup', function() {
root.stop();
});
});
查看站点的页面源代码,锚图像周围的 <a>
标记并不是真正必要的。而且 $
似乎不是保留字符,因此不需要对对象使用 jQuery
。缓存一些重复使用的变量也可以稍微优化脚本。