JQuery open: with $.ajax scroll to top

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Post Reply
dzcadii
Posts: 94
Joined: Sun Mar 01, 2015 4:36 am

JQuery open: with $.ajax scroll to top

Post by dzcadii » Sun Aug 16, 2015 12:35 am

Here is a solution if you are loading a jquery dialog with $.ajax that has any links inside of the returned content and it scrolls to the bottom or position in the dialog where the links are.

Plus I put some other goodies you might find useful!
In the "open" event of the jquery dialog place a timeout and a scrollTop (see code below):

Code: Select all

<script type="text/javascript">
	$("#myDialog").dialog({
		autoOpen: false,
		width:879,
		height:550,
		closeOnEscape: false,
		draggable: false,
		resizable: false,
		modal: true,
		stack: false,
		hide: {
			effect: "scale",
        	easing: "easeInBack",
		},
		show: {
			effect: "scale",
        	easing: "easeOutBack",
		},
		buttons: {
			"Close": function(){
				$(this).dialog("close");
			}
		},
		beforeClose: function() {
		},
		open: function(){
			$(".ui-dialog-titlebar-close", this.parentNode).hide(); //Removes the "close buttom" or "X" at the top right of the dialog
			$.ajax({
				type: 'get',
				url: 'pathToYourScriptFile',
			  	cache: false,
			  	async: true,
			  	dataType: 'html',
			  	success: function(pageInfo) //pageInfo is the contents of your "pathToYourScriptFile"
			  	{
					$('#myDialog').html(pageInfo);
				}
			});
			//Force a scroll to the top because we have <a href> in content
			setTimeout(function(){
				$(".ui-dialog-content").scrollTop(0); //Here is the solution
			},1000);
			
		}
	});
</script>


Post Reply