Question

我正在尝试创建一个跨浏览器（至少IE8）单页网站，用户可以通过该网站垂直滚动到页面的不同部分，通过CSS禁用本机滚动。

所有这一切都很容易，直到我开始尝试实现后退按钮功能，我在第2天没有取得圆满成功，我说完整，因为标题解释说，我无法让我的处理程序动态一致到之前的散列位置，Chrome除外 - 它的效率为110％。

我最接近实现这一点的方法是“创建与id不匹配的假哈希”，避免在单击后退按钮时浏览器本机“跳转到锚点”行为。以下是文章 - http://forum.jquery.com/topic/animate-offset-left-with-hash-change-jquery（演示链接发布在其底部，没有足够的声誉）

这是我的代码：

var hash='',
            faked=false;

        $(function(){
            if (! 'onhashchange' in window){
                setInterval(function(){
                    if (hash!=location.hash) {
                        hash=location.hash
                        $(window).trigger('hashchange')
                    }
                },100)
            }
            $('nav a').on('click',function(){
                $(window).trigger('hashchange',[$(this).attr('href')])
                return false;
            });
            if (!location.hash) 
                location.hash="main"
            else
                $(window).trigger('hashchange')
        });
        $(window).on({
            resize:function(){
                $(window).trigger('hashchange',[null,true])
            },
            hashchange:function(event,fakeHash,immediate){
                if (faked){
                    faked=false;
                    return
                }

                var h = (fakeHash||location.hash).replace(/home-/,''),

                    top=$(h).offset().top-18,

                    active=$('nav ul li').removeClass('active').find('a[href="'+h+'"]').parent();

                console.log(h+fakeHash+location.hash);

                setTimeout(function(){
                    active.addClass('active')
                },fakeHash?500:0);

                $('html, body').stop().animate({
                    scrollTop: top
                },immediate?0:700,'easeInOutExpo',function(){

                    if (fakeHash) {
                        faked=true
                        setTimeout(function(){
                            location.hash='home-'+fakeHash.replace(/#/,'');
                        },fakeHash?500:0);  
                    }

                })
            }
        })

这是我的HTML：

<nav>
<ul class="nav" style="position:fixed; top:0; right:0; z-index:2000; background:red">
    <li><a href="#main">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
</ul>
</nav>
<div id="main" class="page-content">
    <h2>Home</h2>
</div>

<div id="about" class="page-content">
    <h2>About Us</h2>
</div>

<div id="services" class="page-content">
    <h2>Services</h2>
</div>

<div id="portfolio" class="page-content">
    <h2>Portfolio</h2>
</div>

这是到目前为止我的尝试演示的链接 - http://test.trmmultimedia.com/scrollto-test/test2.html

我还必须提一下，我已经看过几十个插件，无论是女巫还是没有完全正在寻找的东西，因为缺乏我的技能水平所需要的或者不具备的技能文件或经验。

非常感谢任何帮助建议。

jQuery scrolltop动画到后退按钮上的前一个哈希

0 个答案: