从带有滚动和偏移的单独页面导航到特定的锚标记

Question

我正在使用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网站，在自定义编码菜单方面确实增加了额外的障碍。）

输入表示赞赏。 谢谢！

Answer 1

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

不知道这是否是您要的内容，但我想我理解了这个问题？