CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 267   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

16

Кнопка “Вверх” на CSS + jQuery

Jemand 32183
CSS, JavaScript

1. CSS

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
	}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
 	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover {
	color: #000;
	}
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover span {
	background-color: #777;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$("#back-top").hide();
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 50) {
					$('#back-top').fadeIn();
				} else {
					$('#back-top').fadeOut();
				}
			});
			$('#back-top a').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
	});
</script>

jQuery и JS нужно разместить в разделе <head> Вашей страницы в том порядке, как указано здесь.
4. HTML

<p id="back-top">
	<a href="#top"><span></span>Вверх</a>
</p>

Картинка-кнопка
Кнопка вверх

Рекламная пауза

» 16 комментариев

  1. Приветствую!
    К сожалению ничего не получается, кнопка есть, но она появляется сразу, если вставлять код как есть то вверх вообще не поднимается. Поменял текст якоря начала подниматься, но все равно нет плавного хода и кнопка видна сразу. Изображение стрелки пока не загружал, но я думаю, оно не влияет.
    Да же не знаю теперь че делать?!? Вас заморочил, вон и пост мне и все дела)) Может у меня руки из ()(), поставил в одну запись cometodaddy.ru/seo-novosti/seo-text-vne-zakona, посмотрите может чего и подскажете дельного)

  2. Подключение jQuery
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"/script>

    В конце написано /script>
    нормально то что он так написан?
    Может правильней
    Или как у вас?

  3. Уважаемая,Администрация, возможно Вы можете мне помочь? Я установил все по инструкции, и все работает, но при наводке jq не работает, может подскажете что мне делать, а то я уже всю голову себе сломал…

    • Денис, чтобы Вам помочь, мне нужно видеть проблемную страницу.

      • На Вашем демо, показано что при наведение на иконку она плавно (jq) меняет цвет на заданный, а в моей ситуации он просто резко “перескакивает” на другой цвет, хотя jq установлено в head.

        • Проверьте правильность пути, проверьте не подключено ли больше одной библиотеки.
          Я “виртуально” не могу решить проблему.

          • 5 декабря 2011 22:01

            Thumb up 0  Thumb down-1 1

            Простите мне мою непрофессиональность, но я уже всю голову сломал. Скажите, Вы подразумеваете что это нужно искать в “страницах сайта”?

          • 5 декабря 2011 23:23

            Thumb up 1  Thumb down0 1

            Это нужно искать в коде страницы, куда подключена кнопка.

  4. Скажите где установлена граница после которой начинает появляться кнопка “вверх” мне нужно ее немного сместить.

  5. установил работает нормально, но проблема в том , что кнопка постояяно актинна даже даже когда позиционирование находится вверху страницы


Оставить комментарий