Loading HTML in a div is an unusual problem

Question

I have an unusual problem with a site that I created for a friend.

I created index.html with links to the left sidebar to stay constant. When you click the link, the external external HTML file is called inside the main div in the center of the page.

This works wonderfully, but with one small problem (which is actually an annoying problem)!

If you click on the first link, for example, on "products", you can scroll it from left to end to the end to the last image. If you then click "fashion", another HTML file is called, but it calls it at the stage that you stopped at the "products", that is, all the way to the right, and not at the beginning.

I basically need to get HTML to call the page at the beginning every time the link is clicked. Here is my website for you to find out what I'm talking about ...

http://www.hannahdakin.co.uk/betasite

PS I can not find anyone else with a similar problem after browsing the forums, but there may be a term for this problem that I am not familiar with.

I would always be grateful if anyone could help!

Answer 1

You will need to apply the jQuery command . scrollLeft (0) to your page body to reset the horizontal position on each click. For instance:

$('#products').click(function(){ $('.slider').load("allimages.html #products2"); $('body').scrollLeft(0); }); 

This should be done on the body of the page, since your scrollbars are tied to the entire page, not to the container.

You will need to copy this for each of the events on your menu.

Answer 2

You can use .scrollLeft(0) to reset the horizontal scroll position in the <div> .