Если страница сайта имеет большую высоту, было бы удобно при ее просмотре кликом вне страницы вернуться к ее началу.
Для этого создадим следующий макет страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link href="/styles/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/scripts/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="/scripts/auto.js" charset="UTF-8"></script>
</head>
<body>
<table id="table_main" >
<tr align="center" >
<td id="maket_left" >
</td>
<td>
<div id="maket">
<div id="header" >
</div>
<div id="content">
<div id="left_cont">
</div>
<div id="mid_cont">
</div>
<div id="right_cont">
</div>
</div>
<div id="footer" >
</div>
</div>
</td>
<td id="maket_right">
</td>
</tr>
</table>
</body>
</html>
CSS-стиль:
body, html {
margin:0px;
padding:0px;
text-align:center;
}
#maket {
width:951px;
background-image: url(/img/fon.jpg);
text-align:left;
}
td{
vertical-align: top;
}
#content{
background-color:#FFFFFF;
margin-left:30px;
margin-right:30px;
margin-bottom:-20px;
width:890px;
float:left;
height: expression(this.scrollHeight < 351px ? "350px" : "auto" );
min-height: 350px;
}
#left_cont{
padding-left:20px;
width:210px;
float:left;
text-align:left;
}
#mid_cont{
padding-left:10px;
width:540px;
float:left;
text-align:center;
}
#right_cont{
padding-left:10px;
width:100px;
float:left;
text-align:center;
}
#footer{
margin-bottom:-10px;
clear:both;
}
|
maket_left |
|
maket_right |
Для того чтобы при клике на блоках maket_left и maket_right страница автоматически прокручивалась к своему началу добавим следующий JQuery-код:
$(document).ready(function() {
var width_window=window.innerWidth;
$('#maket_left').css({'width':(width_window-951)/2+'px'});
$('#maket_right').css({'width':(width_window-951)/2+'px'});
$('#maket_left,#maket_right').click(function() {
$('html,body').animate({"scrollTop":0},"slow");
});
});
