Всегда использовал эту комбинацию, но в последнем проекте никак не могу справиться. Блок со стрелкой должен располагаться в левой части экрана (слева от контента), но он располагается под футером (скриншот)
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="all_body">
<!-- Главное меню -->
<div class="main_menu">
</div>
<!-- Главное меню конец -->
<!-- Контент -->
<div class="content">
<table class="main_table_content">
<tr>
<td width="*">
</td>
<td width="15%" style="border-left: 1px solid black;">
<!-- Панель пользователя -->
<div id="user_panel">
</div>
</td>
</tr>
</table>
</div>
<!-- Контент конец -->
<div id="footer">
<!-- POPup -->
<div id="popupContact">
<a id="popupContactClose">X</a>
<h1>Форма для отправки письма</h1>
<p id="contactArea">
</p>
</div>
<div id="backgroundPopup"></div>
<!-- POPup end -->
<table width="100%" height="550px">
<td width="35%"> <!-- кнопы футера -->
</td>
<td width="1%">
</td>
<td width="*"> <!-- баннеры рекламы -->
</td>
</table>
</div>
</div>
<!-- scroll arrow -->
<p id="back-top"><a href="#"><span></span></a></p>
</body>
</html>
CSS: (стили стрелки в самом низу)
body {
background: url(../img/back_top.jpg);
}
A img {
border: none;
}
A {
color: black; Text-decoration: none;
}
A:visited {
color: black; Text-decoration: none;
}
A:active {
color: black; Text-decoration: none;
}
A:hover {
color: black; Text-decoration: none;
}
div.all_body {
width: 100%;
background: url(../img/back.jpg);
margin: 0 auto;
padding: 0 auto;
}
div.main_menu {
width: 100%;
height: 200px;
text-align: center;
background: url(../img/back.jpg);
margin-top: 10px;
}
.main_table_content #user_panel {
text-align: center;
z-index: 101;
display: block;
}
#user_panel .img_panel {
width: 150px;
height: 210px;
align: center;
border: 1px solid black;
border-radius: 15px;
margin: 20px;
}
.username_panel {
font:1.1em Segoe Print,sans-serif;
}
div.content {
background: url(../img/back.jpg);
margin: 0 auto;
padding: 0 auto;
width: 93em;
border: 1px solid black;
border-radius: 15px;
}
.main_table_content {
width: 100%;
}
.main_table_content td {
vertical-align: top;
padding: 5px;
text-align: center;
}
.main_table_content p {
margin: 10px;
}
.content_table {
width: 100%;
margin-top: 20px;
}
.content_table td {
background: white;
border: 1px solid black;
border-radius: 15px;
}
#footer {
width: 93em;
height: 555px;
margin: 0 auto;
padding: 0 auto;
background: white;
margin-top: 20px;
position: relative;
border: 1px solid black;
border-radius: 15px;
margin-bottom: 20px;
}
#footer .footer_rekl {
align:center;
margin-left:25px;
margin-top:10px;
border:0;
}
/****************************** scroll-arrow *****************************/
#back-top{
position:fixed;
bottom:10px;
left: -6px;
z-index: 999;
border:0;
}
#back-top a{
width:50px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
background-color: transparent;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
border:0;
z-index: 999;
}
/* графическая стрелка */
#back-top span{
width:50px;
height:800px;
display:block;
margin-bottom:7px;
background: url('../img/up-arrow.png') no-repeat bottom center;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
opacity: 0.4;
filter: alpha(opacity=0.4);
border:0;
z-index: 999;
}
#back-top span:hover {
opacity: 1;
filter: alpha(opacity=1);
border:0;
}
#back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}
JS:
$(document).ready(function(){
$(function (){
$("#back-top").hide();
$(window).scroll(function (){
if ($(this).scrollTop() > 700){
$("#back-top").fadeIn();
} else{
$("#back-top").fadeOut();
}
});
$("#back-top a").click(function (){
$("body,html").animate({
scrollTop:0
}, 800);
return false;
});
});
});