Sayfanın belli bir bölgesine linkleme yapabildiğimiz NamedAnchor'ları biraz daha efecktli bir şekilde kullanmak daha estetik olduğu düşüncesindeyim.Umarım birilerinin işine yarar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ginn Efects(006)</title>
<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function
goToByScroll(id){$('html,body').animate({scrollTop:
$("#"+id).offset().top},'100');
}
</script>
<style>
.container{
width:900px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#menu{
width:900px;
height:40px;
line-height:40px;
text-align:center;
font-family:Verdana;
}
#Item1{
width:900px;
height:400px;
border:solid 1px #000;
background: #CCC;
}
#Item2{
width:900px;
height:400px;
border:solid 1px #000;
background: #999;
}
#Item3{
width:900px;
height:400px;
border:solid 1px #000;
background: #666;
}
</style>
</head>
<body>
<a name="top" id="top"></a>
<div class="container">
<div id="menu">
<a href="#anchor1" onclick="goToByScroll('anchor1')">Item1</a> | <a href="#anchor2" onclick="goToByScroll('anchor2')">Item2</a> | <a href="#anchor3" onclick="goToByScroll('anchor3')">Item3</a>
</div>
<a name="anchor1" id="anchor1"></a>
<div id="Item1"></div>
<a name="anchor2" id="anchor2"></a><a href="#top" onclick="goToByScroll('top')">Yukarı</a>
<div id="Item2"></div>
<a name="anchor3" id="anchor3"></a><a href="#top" onclick="goToByScroll('top')">Yukarı</a>
<div id="Item3"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ginn Efects(006)</title>
<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function
goToByScroll(id){$('html,body').animate({scrollTop:
$("#"+id).offset().top},'100');
}
</script>
<style>
.container{
width:900px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#menu{
width:900px;
height:40px;
line-height:40px;
text-align:center;
font-family:Verdana;
}
#Item1{
width:900px;
height:400px;
border:solid 1px #000;
background: #CCC;
}
#Item2{
width:900px;
height:400px;
border:solid 1px #000;
background: #999;
}
#Item3{
width:900px;
height:400px;
border:solid 1px #000;
background: #666;
}
</style>
</head>
<body>
<a name="top" id="top"></a>
<div class="container">
<div id="menu">
<a href="#anchor1" onclick="goToByScroll('anchor1')">Item1</a> | <a href="#anchor2" onclick="goToByScroll('anchor2')">Item2</a> | <a href="#anchor3" onclick="goToByScroll('anchor3')">Item3</a>
</div>
<a name="anchor1" id="anchor1"></a>
<div id="Item1"></div>
<a name="anchor2" id="anchor2"></a><a href="#top" onclick="goToByScroll('top')">Yukarı</a>
<div id="Item2"></div>
<a name="anchor3" id="anchor3"></a><a href="#top" onclick="goToByScroll('top')">Yukarı</a>
<div id="Item3"></div>
</div>
</body>
</html>