hash tags slide to div

**ggalan** · 03-28-2011, 12:49 AM

i have a hash tag on a div, to view it you need to scroll down.
from a button click, how do i get this code to scroll to that div rather than just jump to its location?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#topDiv{height:900px; width:600px; display:block; background-color:#ccc;}
#midDiv{height:600px; width:600px; display:block; background-color:#c99;}
a.btn1{cursor:pointer;}

</style>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script>
$(document).ready(function() {
	$("a.btn1").click(function() {
		window.location.hash = 'midDiv'; 
		$("#midDiv").slideDown(2000);
	});
});
</script>
</head>
<body>
<div id="nav">
	<ul>
		<li><a class="btn1">btn 1</a></li>
	</ul>
</div>
<div id="topDiv"></div>
<div id="midDiv"></div>
</body>
</html>

**ggalan** · 03-28-2011, 12:56 AM

nm, i think this would do it
http://flesler.blogspot.com/2007/10/jqueryscrollto.html

**ggalan** · 03-28-2011, 01:04 AM

hmm, having issues. still doesnt work

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#topDiv{height:900px; width:600px; display:block; background-color:#ccc;}
#midDiv{height:600px; width:600px; display:block; background-color:#c99;}
a.btn1{cursor:pointer;}

</style>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type='text/javascript' src='jquery.scrollTo-min.js'></script>

<script>
$(document).ready(function() {

});
</script>
</head>
<body>
<div id="nav">
	<ul>
		<li><a class="btn1" title="$(...).scrollTo( $('#midDiv'), 800 );">btn 1</a></li>
	</ul>
</div>
<div id="topDiv"></div>
<div id="midDiv"></div>
</body>
</html>

**bluewalrus** · 03-28-2011, 04:04 AM

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#topDiv{height:900px; width:600px; display:block; background-color:#ccc;}
#midDiv{height:600px; width:600px; display:block; background-color:#c99;}
a.btn1{cursor:pointer;}

</style>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type='text/javascript' src='jquery.scrollTo-min.js'></script>
<script type="text/javascript">
$('.btn1').live('click', function () {
	$('html,body').animate({scrollTop: $("#midDiv").offset().top},'slow');
});
</script>
</head>
<body>
<div id="nav">
	<ul>
		<li><a class="btn1">btn 1</a></li>
	</ul>
</div>
<div id="topDiv"></div>
<div id="midDiv"></div>
</body>
</html>

**ggalan** · 03-28-2011, 04:12 AM

thanks!
if i wanted to add a hash mark to the url so that you could link into the div by placing this code the animate breaks, any suggestions?

Code:

$('.btn1').live('click', function () {
		window.location.hash = '#midDiv'; 
		$('html,body').animate({scrollTop: $("#midDiv").offset().top},'slow');
	});

**ggalan** · 03-28-2011, 04:15 AM

nm, just rearranged it

Code:

$('.btn1').live('click', function () {
		$('html,body').animate({scrollTop: $("#midDiv").offset().top},'slow');
		window.location.hash = '#midDiv'; 
	});

Thread: hash tags slide to div

Thread Tools

Search Thread

hash tags slide to div

Bookmarks

Bookmarks

Posting Permissions