Make the link bring you to another section where the menu is at top

[madnhate]

On this website: vogue.com Moderator's Note: No hot linking to commercial sites please.

When you click a link that is not the main page (another section/another page) it will take you to that section/page but the navigation menu is at the top as opposed to you seeing the slideshow at the top(although it still is actually at the top it just isn't the first thing you see when you click to another section of the website). Is there a way to achieve this through javascript?

[jscheuer1]

What slideshow?

[madnhate]

When you go to the website there is a slideshow at the top of the page. When you click another section such as Fashion > Vogue Daily it will go to a page on that Topic but now you don't see the slideshow at the top at first(when the page loads) The menu is at the top instantly when it loads. However, you can actually scroll to the top and the slideshow will be there. It just isn't the first thing you'll see at the top of the page when it first loads(the menu/navigation is) but you can scroll up and the slideshow is still technically at the top of the page still.

[jscheuer1]

Oh, OK. There was no slideshow in my default browser. I see it in Chrome and in Firefox. There are various ways. The easiest is to use a named anchor, see:

http://www.w3schools.com/html/html_links.asp

Scroll to the section titled HTML Links - The name Attribute

It looks like they're using jQuery. Something like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$(window).scrollTop(480);
});
</script>

Where 480 is the amount of desired scroll.

[madnhate]

Would the javascript be placed on the link button? Or is it always set to a specific amount that is probably how far down the navigation is? Won't this vary according to the browser? Thanks for helping!

[jscheuer1]

Specific amount. You can measure the amount. How exactly that's done will vary depending upon the markup and how the slideshow loads visa vis how its height is set. But let's say your nav bar is in a division with an id of nav, you could do:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$(window).scrollTop($('#nav').offset().top);
});
</script>

This could fail if the slideshow waits until some or all of its images are loaded before setting its own height dimension. On the site you linked to, it appears the height of the slideshow is set in css and/or a configuration that takes effect before or on DOM load. So you would put this code after the code that initializes the slideshow, except if the slideshow's height is set for sure and accurately and finally in css, then it would be best to run this code first.

Also, if you're using jQuery on the page already, you should only need one external tag to the jQuery script. It should come before all other scripts that use jQuery.