popup makes page scroll - help!

[hekowie]

Hello everybody..

I have an add to cart button on my products and when clicked a popup opens that offers a choice to go to the checkout page or continue shopping.
The problem is every time the popup opens the page behind it scrolls to the top. I need the page to stay where the button was clicked and not scroll.

I've found posts where it's suggested to add return false to the onclick. But I tried that and it didn't help. Very possible I didn't do it correctly too.

Can someone please review my code and let me know what I need to do?

  <script type="text/javascript">

$(document).ready(function() {	

	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$('#dialog').css('top',  winH/2-$('#dialog').height()/2);
		$('#dialog').css('left', winW/2-$('#dialog').width()/2);
	
		//transition effect
		$('#dialog').fadeIn(2000); 

	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>



<input type="reset" value="Add to Cart" name="add" onClick="window.location='/Merchant2/merchant.mv?Attributes=Yes&Quantity=1'"/><br/>                 
<input type="reset" value="View Cart" name="view" onClick="window.location='/Merchant2/merchant.mv?Screen=BASK&Store_Code=ST'"/><br/>              
<input type="reset" value="Check Out" name="checkout" onClick="window.location='/Merchant2/merchant.mv?Screen=ERS&Store_Code=ST'"/>

[VIPStephan]

Where is the button that invokes the popup (or the script, respectively)?

If the click is invoked with jQuery you can do

….click(function(e) {
  e.preventDefault();
  …
}

That preventDefault function prevents the default action, i. e. the link going somewhere.

On the other hand, since the anchor isn’t linking anywhere anyway (as I assume by you saying that it jumps to the top which sounds like you have an href="#") you would be better off just removing that attribute altogether. Why have a link that’s not linking anything?

[hekowie]

Originally Posted by VIPStephan

Where is the button that invokes the popup (or the script, respectively)?

If the click is invoked with jQuery you can do

….click(function(e) {
  e.preventDefault();
  …
}

That preventDefault function prevents the default action, i. e. the link going somewhere.

On the other hand, since the anchor isn’t linking anywhere anyway (as I assume by you saying that it jumps to the top which sounds like you have an href="#") you would be better off just removing that attribute altogether. Why have a link that’s not linking anything?

Yes, I'm assuming it is using jquery because the script shows $(document) etc.
There is no href tag used on the buttons either.

I don't get that click function(e) you posted. Is that what you recommend after my clarification? If so, can you show me the parts you cut out and how it is used?

Thanks

[VIPStephan]

Hang on, I’m not getting something here. Are you saying this “add to cart” button is invoking the popup?

<input type="reset" value="Add to Cart" name="add" onClick="window.location='/Merchant2/merchant.mv?Attributes=Yes&Quantity=1'"/>

Because what I see there is that it just opens a new page.
It would be really great to see a live example.