1

我正在使用 jQuery scrollTo 构建一个多部分启动页面以在部分之间导航。有一个固定的标题，scrollTo 的“偏移”设置考虑在内，但我希望用户能够从网站其他页面导航到特定部分（启动页面上的锚点）。

就目前而言，发生这种情况时没有考虑偏移量......我尝试在部分和#page和body元素上添加边距以及一些相对定位，但这些部分始终与浏览器窗口的顶部。

我想要的是让其他页面的链接考虑偏移量的方法，或者让这些链接将用户带到启动页面的顶部，然后将它们向下滚动到所需的锚点。

js：

    //menu scrolling

    jQuery('#menu-primary').localScroll({
        easing: 'easeInOutQuint',
        duration: 1200,
        offset: -63,
        hash: true
    }); // end scroll


    // active states for menu items
    $(function(){
        var sections = {},
            _height  = $(window).height(),
            i        = 0;

        $('.section').each(function(){
            sections[this.name] = $(this).offset().top;
        });

        $(document).scroll(function(){
            var $this = $(this),
                pos   = $this.scrollTop();

            for(i in sections){
                if(sections[i] > pos && sections[i] < pos + _height){
                    $('li').removeClass('active');
                    $('.nav-' + i).addClass('active');
                }  
            }
        });
    });

html:

<div class="menu-primary-container">
   <ul id="menu-primary" class="menu">
       <li id="menu-item-21" class="nav-section1 active"><a href="/#section1">Home</a></li>
       <li id="menu-item-13" class="nav-section2"><a href="/#section2">two</a></li>
       <li id="menu-item-12" class="nav-section3"><a href="/#section3">three</a></li>
       <li id="menu-item-14" class="nav-section4"><a href="/#section4">four</a></li>
       <li id="menu-item-19"><a href="http://galvanizingequity.com/?page_id=17">other page</a></li>
   </ul>
</div>

    <div id="scrollwrap">
    <div class="scrollbox one">
        <a name="section1" class="section"></a>
        <h2>Apples</h2>
    </div>
    <div class="scrollbox two">
        <a name="section2" class="section"></a>
        <h2>Bananas</h2>
    </div>
    <div class="scrollbox three">
        <a name="section3" class="section"></a>
        <h2>Toast</h2>
    </div>
    <div class="scrollbox four">
        <a name="section4" class="section"></a>
        <h2>Papaya</h2>
    </div>
    </div><!--scrollwrap-->

（它是一个 wordpress 网站，就自定义编码菜单而言确实增加了额外的障碍。）

输入表示赞赏。谢谢！

4

1 回答 1

1

您可以设置您的 jquery，以便在页面加载/准备好时放入 a scrollTop(0)，然后使用以下方法获取 javascript 中的哈希：window.location.hash然后只需animate({scrollTop,$('a.'+hashvaluehere).offset().top},1000);

不确定这是否是您要问的，但我想我理解了这个问题？

于 2012-06-30T21:48:07.420 回答