Question

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.

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-->

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

Input is appreciated. Thanks!

Answer 1

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?