从带有滚动和滚动的单独页面导航到特定的定位标记抵消 [英] navigating to specific anchor tag from separate page w/ scroll & offset

问题描述

我正在使用jQuery scrollTo构建多节启动页面，以在各节之间导航.有一个固定的标头，scrollTo的偏移"设置考虑了这一点，但我希望用户能够从网站上其他页面导航到特定部分(初始页面上的锚点).

I'm building a multi-section splash page using jQuery scrollTo to navigate between sections. There's a fixed header, which scrollTo's 'offset' setting takes into account, but I'd like users to be able to navigate to specific sections (anchors on the splash page) from pages elsewhere on the site.

就目前情况而言，发生这种情况时不会考虑偏移量...我尝试在这些部分以及#page和body元素上以及这些地方和那里的一些相对位置上都添加了页边距始终与浏览器窗口的顶部对齐.

As it stands, the offset is not being taken into account when this happens... I've tried adding margins on both the sections and the #page and body elements as well as some relative positioning here and there but the sections always align with the top of the browser window.

我想要的是要么考虑其他页面的链接，要么考虑这些偏移，或者让那些链接将用户带到初始页面的顶部，然后将其向下滚动到所需的锚点.

What I'd love is either a way to have links from other pages take the offset into account, or have those links take the user to the top of the splash page and then scroll them down to the desired anchor.

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网站，在自定义编码菜单方面确实增加了一个额外的障碍.)

(It's a wordpress site which does add an extra obstacle as far as custom-coding the menu.)

感谢您的投入.谢谢！

推荐答案

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

You could setup your jquery so that when the page loads/ready you put in a scrollTop(0), then get the hash in javascript using: window.location.hash then simply animate({scrollTop,$('a.'+hashvaluehere).offset().top},1000);

不确定是不是您要的内容，但我想我理解了这个问题?

Not sure if that's what you were asking but I think I understood the question?

这篇关于从带有滚动和滚动的单独页面导航到特定的定位标记抵消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！