Question

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

就目前而言，当发生这种情况时，不会考虑偏移...我尝试在两个部分和#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)，然后使用：window.location.hash在javascript中获取哈希，然后只需animate({scrollTop,$('a.'+hashvaluehere).offset().top},1000);

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

从单独的页面导航到特定锚标签w / scroll＆amp;抵消

1 个答案: