Проблема с позиционированием прокрутки к началу страницы

sgu33 · May 26, 2012

Добрый день!

Пожалуйста помогите решить задачку с позиционированием вставленного блока с кнопкой прокрутки к началу страницы. Никак не могу пристыковать данную кнопку справа к блоку conteiner с небольшим отступом.

Для ясности картинку с вопросом немного подправил:

Код сстраницы следующий:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();

	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>
<style>
/*————————————————Back to top button—————————————————————— */
#back-top {
	position: fixed;
	bottom: 180px;
	margin-left: -50px;
}

#back-top a {
	width: 40px;
	display: block;
	text-align: center;
	font:bold 12px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 2px;
	background: #ddd url(02img/up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}


/*——————————————--Правила для блока middle——————————————————-*/
#middle {
min-height: 250px;
background-color: #FF0000;
}
/*——————————————--Правила для блока container—————————————————*/
#container{
width:980px;/*фиксированная ширина 980 пикселей*/
margin:0 auto; /*ровняем по центру, по горизонтали*/ 
background-color: #0066FF;
}

/*——————————————--Правила для блока left———————————————————*/
#left {
width:220px;
float:left;
background-color:#FF9933;
}
/*——————————————--Правила для блока content—————————————————-*/
#content {
text-align:left;
margin:0px;
width:760px;
margin-left:221px; 
background-color: #009900;
}

</style>
</head>
<body>

<div id="middle">
div midle
<div id="container">
div container
<div id="left">div left</div><!-- #left-->
<div id="content">div content</div><!-- #content-->
<p id="back-top"><a href="#top"><span></span>кнопка</a></p>
</div><!-- #container-->
</div><!-- #middle-->

</body>
</html>

Взаранее благодарен за ответы

Edited May 26, 2012 by sgu33

mrnobody · May 26, 2012

У Вас не закрыт элемент <p id="back-top">.

А если добавить к

#content {position: relative;}

, а к

#back-top {position: absolute; left: 100%;}

Вот так примерно получилось — http://jsfiddle.net/Jx6ET/ .

sgu33 · May 26, 2012

У Вас не закрыт элемент <p id="back-top">.
А если добавить к
#content {position: relative;}
, а к
#back-top {position: absolute; left: 100%;}
Вот так примерно получилось — http://jsfiddle.net/Jx6ET/ .

Спасибо за ответ, но такое решение не совсем подходит, кнопка действительно появляется справа от блока но теряет весь смысл данной функции так как при длинной странице появляется только в самом низу страницы.

Avalon4eg · May 28, 2012

вынесите кнопку из #container и #middle (положите ее просто в body) и position absolute замените на fixed, координаты кнопки подбирайте относительно окна браузера

Sign In

Проблема с позиционированием прокрутки к началу страницы

Question

sgu33

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

sgu33

Link to comment

Share on other sites

Avalon4eg

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information