Safari and links to elements in overflow:auto content

Posted on by

I’m working on a project right now that has some content in div tags with their overflow property set to auto. Then, on another part of the page, there are links that point to elements (using their IDs) inside the overflowed div tags (See example). This all works just fine in IE6 and Firefox/Mozilla, but Safari wasn’t behaving. You can click the links all day long, but Safari won’t scroll the selected anchor into view.

Well, after a few hours of tyring different ways to hack Safari into submission, I decided that the only way I could get it working was to use some Javascript, so I thought I should share the code since there were a few pages on Google also looking for solutions.

Here is what the Javascript looks like:

var targBox = "box";
function init() {
	if (document.getElementById) {
		var atags = document.getElementsByTagName("A");
		for (var i=0;i<atags.length;i++) {
			var ca = atags[i];
			if (ca.href.indexOf("#") > -1) {
				ca.onclick = function() {
					scrollDivToAnchor(this.href.split("#")[1]);
				}
			}
		}
	}
}
function scrollDivToAnchor(a) {
	var b = document.getElementById(targBox);
	b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;
}

Sample page with the working code:

View Example

28 thoughts on “Safari and links to elements in overflow:auto content”

  1. I don’t know nuthin’ about that, but… Your indents are wildly out of control. They should be 4 spaces. Not more. Not tabs.

    Also, I’d like to see you use a little more spacing in your for loop definition…

    for (var i=0 ; i < atags.length ; i++) {

    Remember, clean code is happy code.

  4. Spiffy. I was just looking for a way to scroll a DIV to its top in Safari, and your refernce to element.scrollTop was just the ticket. Superthanks!

  6. Thanks for this great example – it doesn’t seem to work linking to a different page with ID/name tags on it. (expecting the user to click twice – once to get to the page and once to jump) Have you had to solve this problem before?

    thanks,
    Zak

  7. You would need a bit of extra modification for that to work – it’s possible, though. You would need to check the url for an anchor, and if it exists call the function that scrolls the page when the page loads.

  9. i think you may have just saved me days of scratching my head – cheers

  10. anyone has experience with IFrame? i need to dynamically write a passage to iframe. it works for all browsers except safari. Help!

  11. Geoff, Ive been looking for a solution for a long time to get an iFrame to autoscroll when the iFrames height and width is 100%. I can get it to work fine in most browsers, except Safari.

    The problem is the 100% which prevents the content displaying in Safari. However, I think your javascript may apply to my problem.

    You mention some extra modification to your javascript to check a url for an anchor. I’m new to javascript so have no idea how to write this. Do you have an example of how this works??

    Also, could this script be applied to an iFrame instead of a div?

    Thanks in advance

  12. This example doesn’t work in my version of safari (1.2.4 (v125.12)) has anyone else experienced this? I would really love to be able to get this going, but the javascript is stumbling at almost every step… I’ve got it as far as the init function, but if I do alert(atags.length) after the document.getElementsByTagName(“A”) I keep gettig 0…

  13. Echo-ing Katrina’a comments from above – I have no-hair and had no sleep. This had been driving me crazy. It’s certainly a solution, not the solution. It’s just narrowed the ppl who won’t be able to use the anchor links to Mac IE & Safari users behind a hard-core corporat firewall with Javascript default disabled. Surely not that many? ;-P

    THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  15. This is a good fix however when I add a graphic rollover button to the page it breaks, any idea why?

  16. I’m not sure… It could be a number of things. Does the page throw any javascript errors when it loads or when you hover the images?

  18. Following up on the comments from Zak back in Apr, I’m trying to get this script work for my .shtml pages.

    My anchors reside in a .ssi file which is included in shtml file.

    When you mentioned “need to check the url for an anchor, and if it exists call the function that scrolls the page when the page loads,” exactly what kind of modifications are you referring to?

    Thanks, Geoff.

  19. Your links being inside an ssi shouldn’t make any difference. The server would assemble the page on the back end and you’ll get a ‘normal’ looking HTML document in the browser, so it should behave exactly the same as any other page.

  21. I’m trying to do the same thing except that instead of having the links on the same page as the div, I need them on a different page.

    Any ideas as to how to get this to work?

    I tried putting the java on the page with the div, but it didn’t work, and since we’ve only JUST learned if/else statements in my java class at University, I couldn’t figure out how to mod the code myself :)

    [by-the-by, spiffy problem-solving!]

  22. It should still be possible, but you’ll have to modify the code to either call the function on the new page when it loads (you could read the location.has on page load) or if you are using it in an iframe, put half of the code in the iframe and half the code on the page with the links, and modify the links page to call the function in the iframe instead of on the same page.

  23. What if your html references and external style sheet and it is a div tag within a div tag. Not too sure how to reference that in the javascript file. Thanks for the work around

  24. Hey! this is great, been trying various versions of this for ages with no luck. Only thing is that it doesn’t work with mac ie 5.2.3. It moves the page down to where the hidden overflow is rather than scrolling the div. if this can be fixed i’m sorted! any ideas? Cheers!

  25. This was built specifically for Safari, so it should only execute when viewed with Safari – what you are seeing might just be IE’s default behavior and might need a different fix.

  26. argh! it doesn’t seem to work if you use image maps… sorry i know this aint a support forum but have you any ideas? is the problem that maps are old and naff and i shouldn’t be using them? here’s an adapted version of the original html, js file is the same.
    http://www.chrisslowe.uklinux.net/test/test.html
    you’ll need to hover over the right hand side of the (none)image to access the image map links. all works in firefox, just not safari…. ta, chris

  27. Nice solution!
    I have added some extra code to the script so you can link to an element from another page and it does not give an error if the id does not exist in the page:

    function init() {
    if (document.getElementById) {
    var atags = document.getElementsByTagName("A");
    for (var i=0;i -1) {
    ca.onclick = function() {
    scrollDivToAnchor(this.href.split("#")[1]);
    }
    }
    }
    if(this.location.href.split("#")[1]){
    scrollDivToAnchor(this.location.href.split("#")[1]);
    }
    }
    }

    function scrollDivToAnchor(a) {
    if(document.getElementById(a)){
    var b = document.getElementById(targBox);
    b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;
    }
    }

  28. Pingback: At the moment

Comments are closed.