T.M. SoftStudio

feci quod potui, faciant meliora potentes

Прокрутка страницы кликом

 

Если страница сайта имеет большую высоту, было бы удобно при ее просмотре кликом вне страницы вернуться к ее началу.

 

Для этого создадим следующий макет страницы:

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

header

left_cont

mid_cont

right_cont

 

footer

maket

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");

});

});