我发现了一个非常易于使用和实现的jquery插件,用于在网站上平滑滚动,以帮助查看视差效果。
现在为了实现它,我制作了一个.js脚本,它只是
$(document).ready(function(){
// $fn.scrollSpeed(step, speed, easing);
jQuery.scrollSpeed(100, 800);
});
按照说明。整个插件显然有自己的.js文件,我想我会包括的内容
// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 1.0.2
(function($) {
jQuery.scrollSpeed = function(step, speed, easing) {
var $document = $(document),
$window = $(window),
$body = $('html, body'),
option = easing || 'default',
root = 0,
scroll = false,
scrollY,
scrollX,
view;
if (window.navigator.msPointerEnabled)
return false;
$window.on('mousewheel DOMMouseScroll', function(e) {
var deltaY = e.originalEvent.wheelDeltaY,
detail = e.originalEvent.detail;
scrollY = $document.height() > $window.height();
scrollX = $document.width() > $window.width();
scroll = true;
if (scrollY) {
view = $window.height();
if (deltaY < 0 || detail > 0)
root = (root + view) >= $document.height() ? root : root += step;
if (deltaY > 0 || detail < 0)
root = root <= 0 ? 0 : root -= step;
$body.stop().animate({
scrollTop: root
}, speed, option, function() {
scroll = false;
});
}
if (scrollX) {
view = $window.width();
if (deltaY < 0 || detail > 0)
root = (root + view) >= $document.width() ? root : root += step;
if (deltaY > 0 || detail < 0)
root = root <= 0 ? 0 : root -= step;
$body.stop().animate({
scrollLeft: root
}, speed, option, function() {
scroll = false;
});
}
return false;
}).on('scroll', function() {
if (scrollY && !scroll) root = $window.scrollTop();
if (scrollX && !scroll) root = $window.scrollLeft();
}).on('resize', function() {
if (scrollY && !scroll) view = $window.height();
if (scrollX && !scroll) view = $window.width();
});
};
jQuery.easing.default = function (x,t,b,c,d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
})(jQuery);
现在我的问题是,每次刷新页面时:http://danceforovariancancer.com.au
然后点击我的导航条链接,或者如果我在页面下到一半时刷新了,它会重置滚动开始位置,并在你可以滚动到任何位置之前将页面向上推到顶部。我可以用类似currentscrollTop或的东西替换这些.js文件中的一个数字吗?
干杯
插件显然会跟踪根变量中的当前滚动顶部偏移,当您在页面加载时调用jQuery.scrollSpeed
时,它会将其初始化为0。
因此,我建议更改以下行,靠近该函数的顶部:
var ...
root = 0,
发件人:
var ...
root = $window.scrollTop(),
经过进一步的分析,这个插件还有其他一些需要改进的地方:
它捕获了resize事件来设置视图变量,但这是无用的,因为代码的其余部分在使用之前也设置了该变量。
它在scrollSpeed作用域中定义了几个变量,这些变量的作用域更适合mousewheel
它跟踪root变量中的滚动偏移量,也跟踪滚动事件处理程序中的偏移量,但最好在需要时当场请求。这使得滚动事件处理程序变得不必要。
它跟踪滚动变量中是否正在进行滚动动画,但它的值永远不会被读取或暴露。所以我建议删除它。
$('html,body').is(':animated');
可以检测动画它有非常相似的水平和垂直滚动代码,所以很遗憾这不是在一个代码块中完成的。
综合来看,插件的改进版本变得更短,看起来像这样:
(function($) {
jQuery.scrollSpeed = function(step, speed, easing) {
var $d = $(document),
$w = $(window),
$body = $('html, body')
root = 0;
if (window.navigator.msPointerEnabled) { return false }
$w.on('mousewheel DOMMouseScroll', function(e) {
var maxY = $d.height() - $w.height(),
animation = {};
animation[maxY > 0 ? 'scrollTop' : 'scrollLeft'] = root =
Math.min(maxY > 0 ? maxY : Math.max(0, $d.width() - $w.width()),
Math.max(0,
($body.is(':animated') ? root : maxY > 0 ? $d.scrollTop() : $d.scrollLeft())
+ Math.sign(-e.originalEvent.wheelDeltaY || e.originalEvent.detail) * step));
$body.stop().animate(animation, speed, easing || 'default');
return false;
});
};
jQuery.easing.default = function (x,t,b,c,d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
})(jQuery);
var $document = $(document),
$window = $(window),
$body = $('html, body'),
option = easing || 'default',
root = 0,
scroll = false,
scrollY = $document.height() > $window.height(),
scrollX = $document.width() > $window.width(),
view;
看看scrollY和scrollX变量。原来的jQuery.scrollSpeed插件现在没有在顶部重置。