Note that there are some explanatory texts on larger screens.

plurals
  1. POnavigating to specific anchor tag from separate page w/ scroll & offset
    text
    copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>js:</p> <pre><code> //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] &gt; pos &amp;&amp; sections[i] &lt; pos + _height){ $('li').removeClass('active'); $('.nav-' + i).addClass('active'); } } }); }); </code></pre> <p>html:</p> <pre><code>&lt;div class="menu-primary-container"&gt; &lt;ul id="menu-primary" class="menu"&gt; &lt;li id="menu-item-21" class="nav-section1 active"&gt;&lt;a href="/#section1"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-13" class="nav-section2"&gt;&lt;a href="/#section2"&gt;two&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-12" class="nav-section3"&gt;&lt;a href="/#section3"&gt;three&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-14" class="nav-section4"&gt;&lt;a href="/#section4"&gt;four&lt;/a&gt;&lt;/li&gt; &lt;li id="menu-item-19"&gt;&lt;a href="http://galvanizingequity.com/?page_id=17"&gt;other page&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="scrollwrap"&gt; &lt;div class="scrollbox one"&gt; &lt;a name="section1" class="section"&gt;&lt;/a&gt; &lt;h2&gt;Apples&lt;/h2&gt; &lt;/div&gt; &lt;div class="scrollbox two"&gt; &lt;a name="section2" class="section"&gt;&lt;/a&gt; &lt;h2&gt;Bananas&lt;/h2&gt; &lt;/div&gt; &lt;div class="scrollbox three"&gt; &lt;a name="section3" class="section"&gt;&lt;/a&gt; &lt;h2&gt;Toast&lt;/h2&gt; &lt;/div&gt; &lt;div class="scrollbox four"&gt; &lt;a name="section4" class="section"&gt;&lt;/a&gt; &lt;h2&gt;Papaya&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--scrollwrap--&gt; </code></pre> <p>(It's a wordpress site which does add an extra obstacle as far as custom-coding the menu.)</p> <p>Input is appreciated. Thanks!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload