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

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

Архив записейКомментарии: 5Просмотров: 215125 мая 2012 г.

Делаем ушку 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>

«Секционные» опции в MaxSite CMS

Единый шаблон под разные сайты

Комментариев: 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;
   });
  });