Develop Reference

Correctly scroll down after adding new elements

I write a simple rss reader in JavaScript.
After loading new news items I want to scroll the view down so you can
read the new items.
var new_element = document.createElement('DIV');
new_element.innerHTML = loaded_feed_item_text;
parent.appendChild(new_element);
parent.scrollTop = parent.scrollTopMax;
Problem:
Some news items may contain pictures or other elements of unknown size.
And the elements load at unpredictable times.
So I load new items, scroll down to show them and then pictures load and
the items' height get adjusted and the view is no more scrolled down.
Desired result:
Elements load their subelements and the parent element is scrolled all
the way down to bottom to show the new elements.

I would consider putting a delay on this, as if you're just loading more and more content randomly and then scrolling the user to the bottom every time, they will not be able to read or view the content they want.
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); // Scroll to the bottom of the page
Also consider adding a button instead that says something like, "View Latest Posts" and then attach the preceding code to a function and call that.

Maintaining scroll position after height of body is changed

I am working on a page that has two states: edit mode and normal mode. The user switches between these states by clicking on a toggle button. Triggering edit mode adds more elements to the page (buttons, etc) and thus forces the body element to increase its height.
My issue arises when a user has scrolled down the page and then triggers edit mode - since the page's height has now increased, their current scroll position is lost. I have been trying to find a way through which I can calculate what the new scrollTop should be, but have not been successful.
I've got a jsFiddle as an example of my issue. It automatically scrolls to the third "entry", to simulate a user having scrolled down that far. Clicking the "trigger change" button in the top right hand corner will add more elements to the page, and the scroll position of having the third entry at the top of the page is lost.
I am aware that I could just redo $('body').scrollTop($('.entry:nth-child(3)').offset().top); after the new contents have been added, but I want the scroll position to be remembered for no matter where the user has scrolled to on the page.
http://jsfiddle.net/Jn8wq/2/
Any help is greatly appreciated!

Check this fiddle.
http://jsfiddle.net/Jn8wq/4/
I added this
var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);
You would notice that I added '9' to the scroll position. It suits your requirement in the given fiddle. But when you implement this on your actual site, you would have to calculate the height of new appended divs dynamically and add that height instead of '9'.

To keep an element where it is in the window after something changes above it, try this:
var tmp = $('#element').offset().top - $(document).scrollTop();
// add stuff
$(document).scrollTop($('#element').offset().top - tmp);

Anchor Link With Two Fixed Navigations - Complex

Basically I have a fixed header with a navigation in it that is always attached to the top of the window. Then I have another fixed element which is a Pagination but its only attaches its self to the top of window when its is scrolled to!
This pagination has anchor links that link to different sections on the page! However when you click on the links it covered the content which both fixed floating elements.
Here is the example: http://www.chudz.co.uk/test/
If you scroll down you will see the pagination attach itself to the header navigation! Then if you click on "A" in the pagination you will see what happens! The content gets covered! (A is the only link that works atm sorry).
Anyone know of a solution I could use?
Thanks

Here is the JavaScript work around for this problem.
First, change the name attribute to id attribute in the head links like this.
<h2><a id="a">Authors - A</a></h2>
Then add this script into your bottom script.
$(document).ready(function(){
$("#pagination a").click(function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - 151; // 151 is the header height + navigation height
window.scrollTo(0,sT);
});
});

Your fixed pagination is not taking up any space in the dom.
You should use 'id' instead of 'name', then add a class to the anchor, position it absolutely and move it upwards with a negative margin (the same as the height of the pagination). This will ensure that the anchor starts below the pagination.

Change CSS of Anchor Tag once a page has been selected - single page website

I have a single page website split into 5 pages (sections), each section fills the screen and when a user clicks on the nav it smoothly scrolls down to that section.
I cant figure out how to underline the anchor element in the upper nav once that page has been selected. I just want it to alert the user which page they are on and I would also need it to change even if the user uses the scroll bar to navigate to that section.
Each section of the page has an id which is linked from the nav. I know how to do this if each section was its own page but not when its a single page site.
Is there a jquery plugin or pure CSS way of doing this please?

jQuery would be your best bet on that one. This will automatically change the nav element when the user scrolls through the page. This works best if each section has the same height, but can be changed a bit to work with multiple section heights. Might need a little changing to fit into your site exactly.
//activates every time user scrolls
$(window).scroll(function () {
//gets the current scroll height
scroll = $(document).scrollTop()
//gets section height -- this is where the editing will have to be done if
//each section is a different height
H = $('.section_class_name').height()
//get the number of sections down
place = (scroll) / H;
place = Math.floor(place) - 1;
if($(document).scrollTop() >= H) {
//all other nav items have no background
$('#menu_ul li').css('background', '');
//the corresponding nav element has this background
$('#menu_ul li').eq(place).css({'background':'#505080','border-radius':'9px'});
}
})

Using #anchors to move scrollbar with extra positioning

Is it possible to change the position of the scroll bar relative to a new hash tag?
Currently, the page scrolls to the top of the element that is targeted using #target, which is normal behaviour. Is there a way to move it so the page scrolls to, for example, 100px further down the page than the anchor tag (adding an extra 100px before the anchor tag)?
Not sure whether cunning placement of the anchor or javascript should be used. Not sure I'm really able to change the position of the anchor so im hoping for a javascript solution.
Thanks

You could combine the answer to this question: On - window.location.hash - Change?
With some extra logic:
$(function(){
var win = $(window); //cache your jq objects!
function fixScrollTop(){
win.scrollTop(win.scrollTop() + 100);
}
if(window.location.hash !== ""){
fixScrollTop();
}
win.bind('hashchange', fixScrollTop);
});
Oh, if you have control over the #anchor in the URL, you can (probably, depending on the browser compatibility you're shooting for) set it to the ID of any element with an ID to make the browser scroll to it.