如何解决当ID和哈希设置相同时,页面加载时平滑滚动问题,偏移量跳跃
|| 更新:完全像这样:但是在jQuery中……也许我应该花一些时间来移植它。 http://davidwalsh.name/mootools-onload-smoothscroll 上下文:WordPress网站,将subnav导航设置为/ page /#idname来向下滚动页面。 我很难弄清楚如何使页面滚动到ID(带偏移量)和设置位置而不会跳转。而且,如果您使用哈希表加载页面,我将如何使页面从顶部向下滚动?//SMOOTH SCROLL
function filterPath(string) {
return string
.replace(/^\\//,\'\')
.replace(/(index|default).[a-zA-Z]{3,4}$/,\'\')
.replace(/\\/$/,\'\');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement(\'html\',\'body\');
$(\'a[href*=#]\').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,\'\') ) {
var $target = $(this.hash),target = this.hash;
if (target) {
var targetoffset = $target.position().top - 60;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetoffset},400,function() {
location.hash = target+\"-section\"
});
});
}
}
});
// use the first element that is \"scrollable\"
function scrollableElement(els) {
for (var i = 0,argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
请注意偏移量-60,对于我来说,它没有抖动,我将哈希设置为与ID不同,这是我根本不需要的...
var targetoffset = $target.position().top - 60;
和
location.hash = target+\"-section\"
我希望哈希值保持不变,但是这样做是为了使偏移量起作用。任何帮助,将不胜感激。
解决方法
简化生活:http://plugins.jquery.com/project/ScrollTo
它具有偏移功能,您只需将其指向元素本身即可。
这看起来就像您对MooTools的SmoothScroll的更新参考。 ScrollTo正是您所需要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。