Log in

View Full Version : Resolved 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?


<!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


<!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



<!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?



$('.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



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