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();
});
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:You may also want to take a look at the difference between using
preventDefault()&return false.