javascript - 平滑滚动 + 函数 goToNext 上的偏移

Question

我想从顶部添加一个偏移量并平滑滚动到以下函数，该功能位于固定的一个按钮上，并跟随用户向下浏览页面。此按钮必须能够滚动通过多个 anchor ，然后返回到第一个 anchor ，理想情况下与顶部的偏移量为 105 像素。在网上搜索了几个小时寻求帮助，但 jquery 不知道自己如何解决这个问题，有什么帮助吗？？此处类似示例 - http://www.google.com/nexus/7/ (右下角的按钮)

<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>

Answer 1

您可以使用 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 .

就是这样。干杯!