Search jQuery

jQuery Forum

How to prevent .load scrolling back to top of page when loading new content into div?

in Getting Started • 12 years ago

Hello,

I've gotten .load to load content into a div but if the window is not at the top of the page it scrolls back to the top each time the new content is loaded but I wanted to avoid any sort of change on the page other than the content in the div. It seems pointless if the user has to scroll back down to the div where the content is each time?

it looks like this...

$(".nav1").click(function(){
$("#main div#content").load('pages/home.html');

Is there a way to keep the window in the same position? Also while I'm at it - is there a more efficient way to write this considering I have 9 pages or should I just write this code out for each instance?

Thanks a million...

Replies(2)

Kevin B

Re: How to prevent .load scrolling back to top of page when loading new content into div?

12 years ago

does .nav1 have an href equal to "#"?

try
return false;

at the end of the click callback.

Also, in my opinion, the best way to handle ajax loading in a navigation bar is to use the href value as the url that is used in the .load.

<ul>
<li><a class="nav" href="pages/home.html">Home</a></li>
<li><a class="nav" href="pages/about.html">About</a></li>
...
</ul>
<script>
$(document).ready(function(){
$('.nav').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
</script>

This also allows for the navigation to still work when javascript is disabled.

-- Kevin

bentonam

Re: How to prevent .load scrolling back to top of page when loading new content into div?

12 years ago

If .nav1 is an anchor tag and the href value is # your click event returns and then the browser will follow the href which is # and go to the top of the page. Try using event.preventDefault()

http://api.jquery.com/event.preventDefault/

$(".nav1").click(function(event){
event.preventDefault();
$("#content").load('pages/home.html'); // #main div#content seemed a bit excessive
});

Hope that helps.

Top Reply

Response title

Attachments

jQuery Forum

How to prevent .load scrolling back to top of page when loading new content into div?

Replies(2)

Re: How to prevent .load scrolling back to top of page when loading new content into div?

Re: How to prevent .load scrolling back to top of page when loading new content into div?

Statistics

Tags

Actions