Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4742
  • Last Modified:

HTML page on load jump to named anchor / div element with id

Hello, I am having some trouble with a website I am programming. I want the page to load halfway down the page at a named anchor. The page is a very tall page, with div elements on top of each other holding content. Very similar to this site : http://www.volll.com  Each div has an id, and a named anchor at the top, and using the jQuery scrollto script, a navigation menu when clicked takes you to the right section. However, my main section (its a div with the id #section_main), like volll.com is halfway down the page. I've looked at their code in painstaking detail and just can't find how they get the page to load at that exact position, with no flickering. I've tried lots of techniques – body onload calling a javascript function that changes the window.location and a jquery $(document).ready() function location.replace('#section_main'); Both of these techniques WORK, but...when the page first loads, it briefly shows the content before the #section_main div and then goes to the correct position. Weirdly, this does not happen in Chrome or Safari. I've even tried to do it on my cpanel with my web hosts, and doing an .htaccess file redirecting to the named anchor. Apparently (according to Google) redirecting to a named anchor with .htaccess is impossible? Any tips would be greatly appreciated. Unfortunately I cannot share the html files as they are confidential, but can put together an html file with the structure of my page if that's required. Hope you can help! Paul
0
pj_curr
Asked:
pj_curr
  • 5
  • 4
  • 3
  • +1
2 Solutions
 
Paul MacDonaldDirector, Information SystemsCommented:
I take it sending people directly to www.domain.tld/default.html#section_main is out of the question?
0
 
AmickCommented:
http://www.volll.com/#section_main
or
http://www.volll.com/#play

Is there a reason you're using javascript?
0
 
sjklein42Commented:
Try simply putting these three lines near the TOP of your page:

<script>
window.location = '#section_main';
</script>

Open in new window

1
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
pj_currAuthor Commented:
paulmacd:That is one way of doing it, although if the website is found on a search engine the user would be taken to the top of the page. Amick: - We're using javascript for scrolling to same page links (jQuery scrollto plugin), and some jQuery animation using http://www.spritely.net/. I assumed that automatically going to a named anchor on load would be javascript, but if you know a different technique I'm all ears! sjklein42: Thanks, I tried that line of code above the html tag, below it, above the head tag and it worked in Chrome Safari, but not Firefox. In Chrome and Safari it loads the page at the desired #section_main, but with Firefox it just loads at the top of the page. Any alternative ideas anyone? .htaccess? Server side code? Thanks for all your help guys. Paul
0
 
sjklein42Commented:
This seems to be more cross-browser-friendly:

<script>
window.location.hash = '#section_main';	
</script>

Open in new window

0
 
Paul MacDonaldDirector, Information SystemsCommented:
You might want to note what the code behind the page is.  There's nothing about the technology you're using (other than Javascript) in your question.
0
 
AmickCommented:
If you're happy with the way volll.com is handling their page, you may want to examine the function smoothto at line 59 in  the file http://volll.com/js/volll.js.  
0
 
sjklein42Commented:
It is not that hard.  The trick is to know the right name of the property to set  ( location.hash  )

http://www.w3schools.com/jsref/prop_loc_hash.asp
0
 
pj_currAuthor Commented:
Hi guys, thanks for the advice and comments above.

sjklein42: I tired this :

(function($) {
$(document).ready(function() {

window.location.hash = '#section_main';	

 });//end document ready

})(jQuery);

Open in new window


Again the above works, but in Firefox, there is a small delay on page load – it will show the very first div element, and then move the window location to the #section_main. It does this in IE too, but not Webkit browsers weirdly

Amick: I have looked at that smoothto function in detail, but my javascript knowledge is fairly limited, so I'm not really sure what's going in on that file. The thing I do like is that when you go directly to a link on http://www.volll.com it actually takes you directly to that section (so for instance, you could share the link http://www.volll.com/#section_works it takes you directly there, so no window location event is happening – very clever. If anyone can advise how they've done this along with the #section_main beiing at the right place on page loading I'd be very happy!

paulmacd: I'm not hugely knowledgeable about server technologies if that's what you mean? My site is XHTML, with jQuery plugins. The server is Apache I believe, so a PHP solution would be best (if there is one). I hope I understood...
0
 
sjklein42Commented:
One more variant for you to try:

Put this at the top of your page:

<script>
if ( window.location.href.indexOf('#') == (-1) )
{
	window.location.href = (window.location.href + '#section_main');	
	window.location.hash = '#section_main';	
	window.location.reload();
	window.location.hash = '#section_main';	
}
</script>

Open in new window

0
 
sjklein42Commented:
Note that the javascript I am offering does not go in a function but is naked.  If you wait for the page to be loaded before calling it, it is too late.  It needs to go at the top before any HTML starts being rendered.  Right after the <html> tag should work.
0
 
Paul MacDonaldDirector, Information SystemsCommented:
"The server is Apache I believe, so a PHP solution would be best..."

Then a PHP solution may be your best bet.  The trouble here is that you're trying to solve a client-side problem (the way the page renders in the browser) with client-side code (that can't run until the page is loaded in the browser) so the effect you get will depend on the client (as you've noticed - different behaviors in different browsers).  

I'm not a PHP guy so I can't be much help here but it seems to me that on the server side you could check to see if the page is not a postback (the page is being loaded for the first time) and then cause the page to load at the anchor you want.  
0
 
AmickCommented:
Why not avoid the problem entirely by rearranging the code so the content you'd like to have immediately displayed arrives first?  Even Volll's code sometimes flickers the about page before arriving at #section_main.  

What is the advantage of going through hoops to rearrange page presentation after it arrives at the client rather than employing flow-cognizant page layout from the beginning?
0
 
pj_currAuthor Commented:
Thanks for all your help with this guys.

In a nutshell, it's virtually impossible to seamlessly do this, but the best solution I found was this (if you're interested!):

 
<?php
header("Location: http://www.mysite.com/redirectedpage.php#main");
?>

Open in new window


Set a PHP redirect on my index page to a redirectedpage.php#main which works seamlessly in Firefox, Safari, Chrome, but not in some IE versions or Opera. This will do for me.

Thanks again.
Paul
<?php
header("Location: http://www.mysite.com/redirectedpage.php#main");
?>

Open in new window

0
 
pj_currAuthor Commented:
It was a very specific and obscure problem, and I was lucky to get the help and direction that I did. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now