Автор Тема: Кнопка "Наверх" или "В начало"  (Прочитано 3737 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Dolce

  • Создатель
  • ***
  • Сообщений: 130
    • Просмотр профиля
  • Версия modx: EVO | REVO
Кнопка "Наверх" или "В начало"
« : 19 Ноябрь 2012, 18:53:24 »
Здравствуйте =) Интересует скрипт, сейчас встречается часто, в том же контакте, при прокрутке страницы вниз появляется стрелочка позволяющая, при нажатие, переместится в начало страницы. Подскажите где найти скрипт для такой фитчи

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Re: Кнопка "Наверх" или "В начало"
« Ответ #1 : 19 Ноябрь 2012, 19:15:01 »
Посмотрите здесь на форуме темы со ссылками на ресурсы с JS и jQuery скриптами, там этих всяких скриптов - тысячи на все случаи жизни.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн Dolce

  • Создатель
  • ***
  • Сообщений: 130
    • Просмотр профиля
  • Версия modx: EVO | REVO
Re: Кнопка "Наверх" или "В начало"
« Ответ #2 : 19 Ноябрь 2012, 19:18:04 »
Первым делом поглядел, чего-то не нашел, может какраз из-за того что очень много всяких решений :002:

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Re: Кнопка "Наверх" или "В начало"
« Ответ #3 : 19 Ноябрь 2012, 19:46:16 »
Тут несколько тем со ссылками на ресурсв с этими скриптами
http://it-folio.ru/forum/index.php?board=34.0

Если мало, просто в гугле набираем "скрипты js", и там немеряно ресурсов со всякими вариантами скриптов. Надо учитывать что скрипты библиотеки jQuery - это тоже JS скрипты.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн ¥ota

  • Администратор
  • Разработчик
  • *****
  • Сообщений: 752
    • Просмотр профиля
    • Портфолио web-мастера
  • Версия modx: Evo, Revo
Re: Кнопка "Наверх" или "В начало"
« Ответ #4 : 19 Ноябрь 2012, 21:38:43 »
У локи стрелочка красивая, надо у него узнать что за скрипт использовал.

Оффлайн nixxx

  • Новичок
  • *
  • Сообщений: 2
    • Просмотр профиля
  • Версия modx: 3.3.1
Re: Кнопка "Наверх" или "В начало"
« Ответ #5 : 27 Январь 2016, 20:26:35 »
получается, такое возможно сделать только с помощью якорей?

Оффлайн jean179

  • Главный модератор
  • Продвинутый
  • *****
  • Сообщений: 483
  • jean179.ru
    • Просмотр профиля
    • Отдых в Анапе в частном секторе
  • Версия modx: 1.12
Re: Кнопка "Наверх" или "В начало"
« Ответ #6 : 28 Январь 2016, 14:54:19 »
Руками все делается. Выдерну со своего проект http://www.rest-anapa.ru/
1. <body id="top"> - это для ссылки, куда будет якорь вести.
2. это в стили
Код: css [Выделить]

/* Button "TOP"
===============================================================================================*/
#back-top{position:fixed;bottom:10px;margin-left:60px;left:90%;}
#back-top a{width:40px;display:block;text-align:center;font:10px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#BCBCBC;
/* background color transition */
-webkit-transition:1s;-moz-transition:1s;transition:1s;    background-color:transparent;}
#back-top a:hover{color:Maroon;background-color:transparent;}
/* arrow icon (span tag) */
#back-top span{width:40px;height:40px;display:block;margin-bottom:7px;background:#D3D3D3 url(../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
/* background color transition */
-webkit-transition:1s;-moz-transition:1s;transition:1s;}
#back-top a:hover span{background-color:#696969;}
.noindex{text-indent:0;}
.other{font-size:13px;border-left:3px solid #ccc;list-style-type:none;margin:10px 0 20px 20px;padding:10px;}


3. это в скрпиты

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


4. в самый низ якорь
<p id="back-top"><a href="#top"><span></span>Наверх</a></p>

Как работает.
1. Пока экран вниз не прокручен, ссылка скрыта.
2. прокручен вниз, ссылка появляется (стилями настраевается и где, и иконка)
3. при нажатии на ссылку реализуется плавная прокрутка и уборка якоря (мы же вверху).

Единстенное не помню, jQuery нужен или нет. И для планости может потребоваться FancyBox. Пробуйте.

Оффлайн nixxx

  • Новичок
  • *
  • Сообщений: 2
    • Просмотр профиля
  • Версия modx: 3.3.1
Re: Кнопка "Наверх" или "В начало"
« Ответ #7 : 29 Январь 2016, 14:20:48 »
все равно лучше всего это на cms делать такие сайты, я вот на UMI CMS все сделал

Оффлайн jean179

  • Главный модератор
  • Продвинутый
  • *****
  • Сообщений: 483
  • jean179.ru
    • Просмотр профиля
    • Отдых в Анапе в частном секторе
  • Версия modx: 1.12
Re: Кнопка "Наверх" или "В начало"
« Ответ #8 : 29 Январь 2016, 14:24:12 »
Тогда выбирайте другую CMS.

Оффлайн css

  • Новичок
  • *
  • Сообщений: 3
    • Просмотр профиля
  • Версия modx: 1.1
Re: Кнопка "Наверх" или "В начало"
« Ответ #9 : 10 Сентябрь 2016, 19:36:21 »
Выдерну со своего проект http://www.rest-anapa.ru/
Простите, пожалуйста, что воскрешаю эту древнюю тему, но очень хочется кнопку, и Ваш пример просто суперский, но, увы, я криворучко, ибо моя кнопка правильно работает только на главной странице, на остальных она не скролит вверх, а делает переход на главную. Подскажите, пожалуйста, если не трудно, что я делаю не так?

Оффлайн jean179

  • Главный модератор
  • Продвинутый
  • *****
  • Сообщений: 483
  • jean179.ru
    • Просмотр профиля
    • Отдых в Анапе в частном секторе
  • Версия modx: 1.12
Re: Кнопка "Наверх" или "В начало"
« Ответ #10 : 10 Сентябрь 2016, 19:54:30 »
<body id="top">

Оффлайн css

  • Новичок
  • *
  • Сообщений: 3
    • Просмотр профиля
  • Версия modx: 1.1
Re: Кнопка "Наверх" или "В начало"
« Ответ #11 : 10 Сентябрь 2016, 20:51:07 »
body id="top"
Есть, потому что кусок кода с тегом боди один на все страницы.

Оффлайн css

  • Новичок
  • *
  • Сообщений: 3
    • Просмотр профиля
  • Версия modx: 1.1
Re: Кнопка "Наверх" или "В начало"
« Ответ #12 : 10 Сентябрь 2016, 21:15:39 »
Я решительно криворучко. Не заметила закрывающие скобки предыдущей функции и вставила Ваш код до них. Теперь всё прекрасно работает. Спасибо Вам огромное за ответ и за замечательный скрипт!

ps Извините за мультипост, но предыдущий пост уже нельзя исправить.