Внимание! Данная запись отмечена как устаревшая и/или потерявшая актуальность! Возможно автор уже передумал и теперь придерживается другой точки зрения, нежели изложенная в тексте ниже.

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

MaxSite CMS / Статьи о MaxSite CMSПросмотров: 6651 (113)

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

3MAX25-05-2012 19:13

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

5vovans26-06-2012 18:37

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

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

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

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

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru