All geek questions in one place

Backing up to subscripts in overflowing content

I have an HTML page with links to subsections in a content wrapper that is positioned / size and uses overflow:auto to display a scrollbar. Links to subsections work (so that the content scrolls to the desired height), but using the "Back" button does not jump to the desired section in Firefox v13, IE v9 or Opera v11 (it does work in Chrome v20 and Safari v5).

Given that I cannot fundamentally change my CSS (I need to use placed, dimensional, overflowing content), how can I get around this?

Solutions involving JavaScript / jQuery are acceptable, but a simple CSS fix is ​​preferred.

Testing page: phrogz.net/tmp/backing...containers.html

 <!DOCTYPE html> <html><head><title>Backing into Subpage Anchors in Overflowed Containers</title> <style type="text/css"> #site-nav { position:fixed; width:10em; top:0; left:0 } #contents { position:fixed; top:3em; bottom:5em; left:11em; right:0; overflow:auto; background:#fed } div { height:15em } div:last-child { height:55em } </style> </head><body> <article id="contents"> <div> <h1 id="a">Section A</h1> <p>Navigate to the different sections at left, and then press the Back button.</p> </div> <div><h1 id="b">Section B</h1></div> <div><h1 id="c">Section C</h1></div> </article> <ul id="site-nav"> <li><a href="#a">Section A</a></li> <li><a href="#b">Section B</a></li> <li><a href="#c">Section C</a><ul> </ul> </body></html>

Firefox previously reported error: https://bugzilla.mozilla.org/show_bug.cgi?id=391664
Link to the opera: DSK-365451@bugs.opera.com

+4
source share
3 answers

I think you could use the onhashchange event. It is supported only by new browsers, but plugins are available, for example http://benalman.com/projects/jquery-hashchange-plugin/

When changing the hash, you can find the element by identifier and change the scrollTop attribute of the container. Something like that:

 $(function(){ $(window).hashchange(function(){ var elem = $(location.hash); if (elem.count() > 0) { elem.offsetParent().animate({scrollTop: elem.position().top}); } }); });
+1
source

I solved this using jQuery, the hashchange plugin proposed by @barius and the following code:

 jQuery(function($){ var $content = $('#contents'); $(window).hashchange(scrollHashIntoView); function scrollHashIntoView(){ // Ensure that the ID I'm looking for is within my scrolling content var offset = $content.find(location.hash).offsetRelativeTo($content); $content.scrollTop( offset ? offset.top : 0 ); } }); // Find the offset of an element relative to some ancestor jQuery.fn.offsetRelativeTo = function(el){ var $el=$(el), o=this.offset(), o2=$el.offset(); if (o){ o.top -= o2.top - $el.scrollTop(); o.left -= o2.left - $el.scrollLeft(); } return o; }

The offsetRelativeTo() code was necessary for my more complicated case when one of the sub-anchors was inside the position:relative parent (which itself was inside the scrollable content).

I made scrollHashIntoView() separate function, because (a) it helps to self-document the behavior, and (b) it allows me to call it separately if necessary, and (c) it separates the execution of this work from the brief registration of events and their actions.

A more reliable solution (handling an unlikely but possible case of nested scroll areas) will find the identifier and offsetParent up to the offsetParent s tree, offsetParent each as needed.

+2
source

I was also going to recommend the onhashchange event, but it is not supported by older browsers. A simple solution is to simply use the hash of the first anchor on your page and automatically install it on it if you don't have a hash.

 $(function() { if(window.location.hash == '') { window.location.hash = $("a[href^='#']:first").attr('href'); } });
-1
source

Source: https://habr.com/ru/post/1416413/

More articles:


All Articles