An unexpected page scrolls up when you click a link

I wrote an HTML page that is viewed primarily on the iPad. Basically this is a list of frequently asked questions with the effect of freezing for each question. To trigger the hover effect on the ipad, I had to set up a dummy link as follows.

<a href="#">The question?</a> 

Here is the problem that is valid for every browser: when the list is so long that you need to scroll down, and when you click on the link at the bottom of the page, it jumps back up, while initiating a freezing effect. I made a violin to demonstrate the purpose:

http://jsfiddle.net/SWXHR/1/

When you scroll down and click on the last link, the page will move up.

Question: How can I prevent the page from navigating at the top when using a dummy link?

+4
source share
4 answers

Add this to your links:

 <a href="#" onClick="return false;">The question?</a> 

Or if you do this through jQuery:

 $('a[href="#"]').click(function(event){ event.preventDefault(); }); 
+13
source

You can use <a href="javascript:;">The question</a> , it won’t do anything (empty javascript command), and your scroll will remain in place;)

+3
source

add anchor to tag

 onclick="return false;" 

It will stop him

+2
source

If all you need is a hover effect, you don’t need to use a .

You can use spaces and replace CSS with target spaces instead of bindings: http://jsfiddle.net/SWXHR/6/

If you want the cursor to be like a cursor for anchors, you can do this with css - cursor: pointer;

+1
source

Source: https://habr.com/ru/post/1393170/


All Articles