Современная, быстрая и удобная система управления сайтом

Как сделать кнопку «Наверх» без плагинов

Архив записейКомментарии: 5Просмотров: 2571

Делаем ушку body_end. Ушка уже предопределена в main.php шаблона, поэтому её нигде прописывать не нужно. Как вариант, можно использовать ушки footer-start или footer-end, но это не принципиально.

Тип ушки задаём как PHP и пишем в ней:

<div id="to_top" style="position: fixed; right: 0; bottom: 0; 
width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div>
 
<?= mso_load_jquery('jquery.scrollto.js');?>
 
<script>
$('#to_top').click(function(){$.scrollTo("body", 300)})
</script>

Элементу div#to_top указываем фиксированное положение, размеры, цвет и текстовую иконку-стрелку. После подключаем jQuery-плагин scrollto - он в уже комплекте MaxSite CMS, предназначен для красивого скролирования к любому HTML-тэгу. Дальше указываем, что скролировать нужно к BODY и время скролинга (300мс).

Пользуемся!

UPD. Вот ещё один вариант от Дениса. Код ушки body_end.

<div id="to_top" style="position: fixed; right: 0; bottom: 0; 
width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div>
 
<script>
$("#to_top").hide();
  
// fade in #to_top
$(function () 
{
	$(window).scroll(function () 
	{
		if ($(this).scrollTop() > 300) 
		{
     		$("#to_top").fadeIn();
		} 
		else 
		{
			$("#to_top").fadeOut();
		}
   });
   
   // scroll body to 0px on click
   $("#to_top").click(function () 
   {
		$("body,html").animate( {scrollTop: 0}, 800);
		return false;
   });
});
</script>

Комментариев: 5 RSS

1Sasha Vasko25-05-2012 14:06

Скрол в Хроме не срабатывает наверное есть проблема с jquery...

2Денис25-05-2012 19:01

у меня так. без доп файлов. в хроме работает

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

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#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;
});
});

3Аноним25-05-2012 19:13

Спасибо, вариант даже интересней! Добавил в запись ваш вариант.

4Аноним02-06-2012 13:11

Еще бы кнопки сами нарисовать через css со стрелками..

5Аноним26-06-2012 18:37

да, второй вариант действительно понравился больше. Спасибо!

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

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)