我想从顶部添加一个偏移量并平滑滚动到以下函数,
该功能位于一个固定的按钮上,并跟随用户向下浏览页面。该按钮必须能够滚动多个 anchor ,然后返回到第一个,理想情况下与顶部的偏移量为 105 像素。拖网数小时寻求帮助,但 jquery 不知道如何解决这个问题,有什么帮助吗?
类似的例子 - http://www.google.com/nexus/7/(右下 Angular 的按钮)
<script>
var max = 6;
function goToNext() {
var hash = String(document.location.hash);
if (hash && hash.indexOf(/anchor/)) {
var newh = Number(hash.replace("#anchor",""));
(newh > max-1) ? newh = 0 : void(null);
document.location.hash = "#anchor" + String(newh+1);
} else {
document.location.hash = "#anchor1";
}
}
</script>
<a href="#" onclick="goToNext();return false;"></a>
<div id="anchor1"></div>
<div id="anchor2"></div>
<div id="anchor3"></div>
<div id="anchor4"></div>
<div id="anchor5"></div>
<div id="anchor6"></div>
最佳答案
您可以使用 animate({scrollTop:value},delay)
使其平滑滚动到元素。
$('document').ready(function () {
//on DOM ready change location.hash to 'anchor1'
window.location.hash = 'anchor1';
//GO TO NEXT click event:
$('a').click(function (e) {
//preventing the default <a> click (href="#")
e.preventDefault();
//get the current hash to determine the current <div> id
var hash = window.location.hash,
//find the (next) immediate following sibling of the current <div>
$next = $(hash).next('div');
//check if this next <div> sibling exist
if ($next.length) {
var id = $next.attr('id'),
nextOffsetTop = $next.offset().top;
//animate scrolling and set the new hash
$('body, html').animate({scrollTop: nextOffsetTop}, 'slow');
window.location.hash = id;
}else{
//else if the next <div> sibling does not exist move to the first anchor
var first = '#anchor1';
$('body, html').animate({scrollTop: $(first).offset().top},'slow');
window.location.hash = first;
}
});
})
看到这个 jsfiddle 。
然后是 闪烁的 。实际上,如果您仔细查看上面的代码,它不会闪烁,而是有些生涩。我首先设置
animate(scrollTop)
,然后更改哈希 window.location.hash = id
。现在,当动画开始滚动时,我们突然改变了哈希,它倾向于直接跳转到下一个 <div>
(这是默认的 haschange
事件),但被 animate()
拉回,导致滚动变得不稳定。我们不能仅仅停止
haschange
事件的默认传播,可能有解决方案可以做到这一点,但不能保证它适用于所有浏览器,每个浏览器在 haschange
事件方面都有不同的行为。但是感谢@Andy E 在您提供的 SO 帖子上的解决方案,我们不需要停止 haschange 传播。我们可以简单地先更改散列,将其重置为最后的 scrollTop()
位置,然后随意滚动动画!//get the current scrollTop value
var st = $(window).scrollTop();
//change the hash
window.location.hash = id;
//reset the scrollTop
$(window).scrollTop(st);
//animate scrolling
$('body, html').animate({scrollTop: nextOffsetTop}, 'slow');
检查这个更新的 jsfiddle 。
现在让我们谈谈 HTML5 History API 。我一开始没有介绍这个的原因是因为它在 HTML5(尤其是 IE)浏览器中的实现方式不同,并且没有对 HTML4 浏览器的回退,使得这种方法在某种程度上不一致。但是我猜你可以使用插件正确地完成这项工作。
以下是使用
history.pushState()
的方法:if ($next.length) {
var id = $next.attr('id'),
nextOffsetTop = $next.offset().top;
history.pushState({state:id}, id, '#'+id);
$('body, html').animate({scrollTop: nextOffsetTop - 105}, 'slow');
}
看到这个 jsfiddle 。
而已。干杯!
关于javascript - 在函数 goToNext 上平滑滚动 + 偏移,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20484671/