我想从顶部添加一个偏移量并平滑滚动到以下函数,
该功能位于一个固定的按钮上,并跟随用户向下浏览页面。该按钮必须能够滚动多个 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/

10-12 04:22
查看更多