Бесплатная CMS для вашего сайта Разумная альтернатива WordPress

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

25-05-2012Reading time ~ 1 min.Roadmap 2873

Делаем ушку 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>
Related Posts
Comments (5) RSS
1 Sasha Vasko 2012-05-25 14:06:51

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


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

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

$("#back-top").hide();<br>  <br>  // fade in #back-top<br>  $(function () {<br>   $(window).scroll(function () {<br>    if ($(this).scrollTop() > 300) {<br>     $("#back-top").fadeIn();<br>    } else {<br>     $("#back-top").fadeOut();<br>    }<br>   });<br>   // scroll body to 0px on click<br>   $("#back-top a").click(function () {<br>    $("body,html").animate({<br>     scrollTop: 0<br>    }, 800);<br>    return false;<br>   });<br>  });

3 Anonymous 2012-05-25 19:13:07

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


4 Anonymous 2012-06-02 13:11:25

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


5 Anonymous 2012-06-26 18:37:11

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

Leave a comment!