0

There is an old StackOverflow question on how to unhide/hide text using +/- symbols.

Cheeso posted a nice solution with some sample code. It was just what I was looking for, although the original poster didn't agree. :-)

I'm using the code on a web site that is intended to be used on mobile devices. The only problem is that the page jumps back to the top of the screen whenever the +/- is tapped.

Is there anyway to get around that? Thanks.

Community
  • 1
  • 1
benevolentprof
  • 1,507
  • 2
  • 13
  • 24
  • Duplicate... Seriously, please just use google. http://stackoverflow.com/questions/7697917/prevent-page-scroll-after-click http://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t http://stackoverflow.com/questions/10139761/auto-scroll-stop-jumps-back-to-top-of-page – ahren Jun 04 '12 at 21:48
  • I'm actually posting to provide a solution. My first choice would have been to add a comment to the original answer, but the question has long since been closed. – benevolentprof Jun 04 '12 at 23:10
  • right, but if someone came across that problem, a simple google would have answered the same query many, many times. There are three examples in my previous comment. – ahren Jun 04 '12 at 23:13

3 Answers3

3

Here is the answer that Cheeso provided to me in email. I am posting it here for the benefit of others who follow. This didn't quite work and I am in the process of figuring out why.

If you change this line $('div p a[href="#"]').click(function() { expando(this); });

to this:

$('div p a[href="#"]').click(function(ev) { ev.preventDefault(); expando(this); });

...I think it should stop scrolling to the top.

When a user clicks on a link that has a hash character, the browser is expected to scroll to the location on the page where the fragment marker is placed. Like a bookmark. For example, in this URL: http://en.wikipedia.org/wiki/Causes_of_WWII#Militarism The fragment (bookmark) is #Militarism , and if you click that link, your browser will scroll to that section.

In the case of that sample I wrote, the hrefs are bare # characters, which implies an empty fragment. And I suppose the browser is scrolling to the default location, which (I guess) is "the top of the page".

To avoid this, just call ev.preventDefault() in the click handler. This is a jQuery trick that suppresses the normal handling of the click; in your case, it suppresses the part where the browser tries to scroll to a non-existent anchor.

Community
  • 1
  • 1
benevolentprof
  • 1,507
  • 2
  • 13
  • 24
  • I got this to work under Chrome, but not Safari on my iPhone. – benevolentprof Jun 04 '12 at 22:30
  • On my iPhone, this works under Atomic Web browser, but not Safari. It seems that this is an ongoing problem with mobile Safari. http://stackoverflow.com/questions/5664147/safari-mobile-ignoring-prevent-default – benevolentprof Jun 04 '12 at 23:23
  • OK. It works under mobile Safari now. I reinstated a line from the original file: `` The other browsers didn't seem to need it. – benevolentprof Jun 05 '12 at 00:33
2

In your click event handler, return false.

$('a.selector').click(function() {
    return false;
});
Bryan
  • 6,682
  • 2
  • 17
  • 21
1

Implement event.preventDefault() in the click handler.

$('a').click(function(e) {
    e.preventDefault();
    // more code here
});
Blazemonger
  • 90,923
  • 26
  • 142
  • 180