stop scrolling to top after AJAX request

Question

Possible Duplicate:
How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?

my browser scrolls to top after ajax request then i use

 $('html, body').animate({ scrollTop: $('#loadMore').offset().top }, 2000);

to scroll back to my div. is there a way i stop it from scrolling to top from the beginning

Do you mean that you want it to scroll to top only on the first Ajax request, and not on subsequent requests? — easeout, Mar 27 '11 at 14:28

score 37 · Accepted Answer · answered Mar 27 '11 at 14:29

37

you should add return false to the end of your ajax call function. Or to the end of your inline call:

<a href="#" onclick="someAjaxCall(); return false">Link</a>

answered Mar 27 '11 at 14:29

fl00r

82,987
33
217
237

the request adds # to my URL, why?!! – Miroo Mar 27 '11 at 14:35
you set it as `href` attribute to your link or it is default behavior. Show your code to understand what is going on. – fl00r Mar 27 '11 at 14:37
you should `return false` to prevent scrolling. – fl00r Mar 27 '11 at 14:39
it doesn't work after using return false :S – Miroo Mar 27 '11 at 15:27
1

It works if you put it in right place. But no one see your code and no one can say where did you put `return false` – fl00r Mar 27 '11 at 15:30
1

If you don't want the # appended, you can use a span instead of an href and attach the onclick to the span. That's how we do it in our applications that are negatively affected by the # in the url. – Amy Anuszewski Mar 27 '11 at 16:21
@fl00r hey man thanx allot :) it helped like a charm :D i am done with today's tasks then ;) – Miroo Mar 28 '11 at 10:13
come on.. just remove # and that's it... (it should look like href="") – mkk Mar 16 '12 at 01:57
I tried adding return false to all my ajax, but it never worked. Instead, I changed all to because "#" is causing browser to jump to the top as mentioned by user Miroo below – Paul Preibisch Apr 01 '14 at 10:05
1

Changing the 'a' to a 'span' worked. Thanks @AmyAnuszewski – Jonathan Laliberte Jun 17 '17 at 05:46

score 9 · Answer 2 · answered Mar 27 '11 at 14:30

9

if you are calling the ajax via anchor click, try this:

<a id="clicker" href="#">Click here to do ajax</a>

$('#clicker').click(function(e) { e.preventDefault(); $.get("/myurl/") })

answered Mar 27 '11 at 14:30

Andreas Wong

59,630
19
106
123

score 5 · Answer 3 · answered Mar 27 '11 at 16:18

Attach the event handler with jQuery (not with the onclick attribute) and remove the href attribute altogether. The problem is that the browser is navigating when the link is clicked. I see this happen alot when onclick is used and there is an error in your event handler before preventing the default.

Another way to fix it for sure is to not use an <a> but rather a <span>.

score 2 · Answer 4 · answered Mar 27 '11 at 14:29

2

/* AJAX stuff here */
$('html, body').stop();

answered Mar 27 '11 at 14:29

mattsven

22,305
11
68
104

1

the request adds # to the URL, that cause the scrolling to top – Miroo Mar 27 '11 at 14:35

stop scrolling to top after AJAX request

4 Answers4

Linked