CODEWITHSUNDEEP
javascriptjqueryhtml
OptimusCrime
OptimusCrime

Reputation: 14863

Avoid window jump to top when clicking #-links

I've got a page with some questions and answers, the answers are collapsed by default. When they click the question I expand the hidden answer-div. The problem is that when I click these questions, the window jump to the top of the screen. This is not a huge problem, but I find it annoying, because I have to scroll down to the question again.

The links simply looks like this:

<a href="#" id="myID">Myquestion</a>

And I've used jQuery and .click as event-listener.

Are there any simple ways to avoid this, or do I have to use .scroll and finding the coordinates of the question? I'd rather avoid this.

EDIT: I know that I can use anchors to do this, but I'd like to avoid any jumping of the screen at all.

Upvotes: 23

Views: 23253

Answers (12)

وديع مسافر
وديع مسافر

Reputation: 1

HTML:

<a id="like-post" href="#\">like</a>

JavaScript:

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});

Upvotes: 0

Nuno cruz
Nuno cruz

Reputation: 215

If you add a "\" to the "#" it will prevent from going to the top.

<a href="#\" id="myID">Myquestion</a>

Upvotes: 0

David
David

Reputation: 633

You can do it very simple: Just add ! in the end of your href:

<a href="#!" id="myID">Myquestion</a>

The alternative jQuery ways are:

$("#myID").click(function(e) {
    e.preventDefault(); // one way 
    return false; // second way prevent default click action from happening
});

Upvotes: 5

zamuka
zamuka

Reputation: 941

$('a').click( function() {
  if ($(this).attr("href") == window.location.hash) {
    event.preventDefault()
  }
});

Upvotes: 1

craig
craig

Reputation: 497

Actually, the easiest way to do this is to remove the href attribute from your anchor tag. As of HTML5, anchor tags don't need to include href attributes to be semantic.

So

<a id="myID">Myquestion</a>

instead of

<a href="#" id="myID">Myquestion</a>

This works in IE8+, Chrome, and Firefox. Note that :link css styles won't apply to anchor tags that don't include href attributes.

If you need the href attribute and/or IE7 compatibility, then 

$("#myID").click(function(e) {
if(e.preventDefault)
    e.preventDefault();
else
    e.stop();
});

is probably the best way to go.

Upvotes: 2

Cain
Cain

Reputation: 1

$('body').on('click', '[href^=#]', function (e) { e.preventDefault() });

if the selector ex.."body" is there during the initial render then use the any selector .. id ... to target the general to have jQuery (as of 1.8.2) iterate over. the "On handler invoke a method called "bind" which is used for newly added content to the DOM",. Using the "[href^=#] will select any href that are in the section tag but you can replace section with anything or nothing and it applies a cancellation to the click event. This technique is great for dynamically created content to the DOM

Upvotes: 0

Niels
Niels

Reputation: 49929

Inside your function of:

And I've used jQuery and .click as event-listener.

Will look something like:

$("#myID").click(function(){});

Change this to (don't forget the param e inside function(e):

$("#myID").click(function(e){
    e.preventDefault();
});

Upvotes: 0

OptimusCrime
OptimusCrime

Reputation: 14863

$("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

e.preventDefault()alone did not work in older versions of IE.

Upvotes: 2

rogal111
rogal111

Reputation: 5933

Example with nice scrolling to answer content:

$("#question_title").click(function(){
  var $answer=$("#answer");
  $answer.slideDown();
  $.scrollTo( $answer, 800 );
  return false;
});

I'm used jQuery scrollTo plugin.

Upvotes: 0

Jonas H&#248;gh
Jonas H&#248;gh

Reputation: 10874

Don't use A tags for tasks that are not navigation-related. It is not semantic markup, and doesn't degrade gracefully. Use buttons instead.

Upvotes: 6

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to add preventDefault() to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.

Example:

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

Upvotes: 25

Marcel Jackwerth
Marcel Jackwerth

Reputation: 54762

You are looking for event.preventDefault (see jQuery API).

$(...).click(function(e) {
  e.preventDefault();
  // your code
});

Upvotes: 0

Related Questions