jQuery slidedown jumps page

Question

Here is a link to the site: http://p7dev.com/bella

When you click on any of the logos, they drop down correctly but the browser also jumps down. How can I keep your place in the browser the same when you click any of the logos?

jQuery(document).ready(function() {

jQuery('.slick-down').click(function() {
jQuery('#hqh-logo').toggleClass('active'); 
jQuery('#hqh').slideToggle('400');
jQuery('#hqt, #scion, #best, #rent').hide();
jQuery('#hqt-logo, #scion-logo, #best-logo, #rent-logo').removeClass('active');
 });

jQuery('.slick-down2').click(function() {
jQuery('#hqt-logo').toggleClass('active'); 
jQuery('#hqt').slideToggle('400');
jQuery('#hqh, #scion, #best, #rent').hide();
jQuery('#hqh-logo, #scion-logo, #best-logo, #rent-logo').removeClass('active');    
});

jQuery('.slick-down3').click(function() {
jQuery('#scion-logo').toggleClass('active'); 
  jQuery('#scion').slideToggle('400');
jQuery('#hqt, #hqh, #best, #rent').hide();
jQuery('#hqh-logo, #hqt-logo, #best-logo, #rent-logo').removeClass('active');    
});

jQuery('.slick-down4').click(function() {
jQuery('#best-logo').toggleClass('active'); 
jQuery('#best').slideToggle('400');
jQuery('#hqt, #hqh, #scion, #rent').hide();
jQuery('#hqh-logo, #hqt-logo, #scion-logo, #rent-logo').removeClass('active');    
});

  jQuery('.slick-down5').click(function() {
  jQuery('#rent-logo').toggleClass('active'); 
 jQuery('#rent').slideToggle('400');
jQuery('#hqt, #hqh, #scion, #best').hide();
jQuery('#hqh-logo, #hqt-logo, #scion-logo, #best-logo').removeClass('active');    
  });


$(".slick-down").change(function(){
$("select").not("#style").hide();
$("#"+$(this).val()).show();
});

score 4 · Accepted Answer · edited May 23 '17 at 12:03

By default, the browser jumps to the location of the element with the ID in the hash. You need to prevent this in your javascript click handler by modifying each of them to use preventDefault() like so:

jQuery(".myclass").click(function(event) {
  event.preventDefault();
  // Do normal things
});

You may also want to take a look at the difference between using preventDefault() & return false.

score 2 · Answer 2 · answered Nov 16 '11 at 17:13

It's because you're linking to a local anchor. For example, the first logo goes to #hqh.

That's going to jump the page to wherever the element with id="hqh" is.

Remove the target div id's from the href of the logo links. Just use # instead:

<a href="#"><img ...></a>

score 1 · Answer 3 · answered Nov 16 '11 at 17:14

1

If your triggering with an A element, you have to do the following

.click(function(e){
    e.preventDefualt();

    // Your code.
});

answered Nov 16 '11 at 17:14

Niels

48,601
4
62
81

Returning false and preventing the default action are not the same thing; returning false rarely has the desired effect (when the difference matters). – Andrew Marshall Nov 16 '11 at 17:16

score 0 · Answer 4 · answered Nov 16 '11 at 17:14

You can prevent the default href from being followed (in this case they point to anchors on the same page) by using event.preventDefault():

jQuery('.slick-down').click(function(event) {
    event.preventDefault();
    //run your code here
});

You can also return false; at the end of your event handlers like this:

jQuery('.slick-down').click(function() {
    //run your code here
    return false;
});

jQuery slidedown jumps page

4 Answers4