Кнопка быстрой прокрутки наверх страницы

Сообщение **Necto** » 11 ноя 2016, 22:59

Здравствуйте!
Не могу разобраться каким элементом можно сделать кнопку при нажатии на которую страница быстро скроллится на самый верх.
Подобное реализовано здесь. В правом нижнем углу появляется круглая кнопка, когда страница немного проскроллена.
Буду очень благодарен за совет!!
С Уважением.

Вот тут посмотри или в расширениях есть такие вещи как: Smooth Scroll 2
или Top Scroller

Сообщение **Necto** » 11 ноя 2016, 23:40

Спасибо!

YouTube · Сообщение **Alex** » 11 ноя 2016, 23:41

Уже не надо расширений, якоря, якоря, якоря...

Сообщение **SuperBatya** » 12 ноя 2016, 00:53

Вот примерчик навоял!

Сообщение **openair87** » 13 ноя 2016, 15:38

SuperBatya, в вашем исходнике когда нажимаешь опубликовать и открываешь сайт этой кнопки нет, так как она реализована ? Так и непонятно. В ваших примерах (опубликованных) открывается. Залейте проект с кнопкой, чтобы понятно было.

Сообщение **anonimus** » 13 ноя 2016, 18:07

SuperBatya писал(а):Источник цитаты Вот примерчик навоял!

в новых версиях всё делается на якорях и прикручивать сторонние скрипты и расширения давно нет необходимости

Сообщение **openair87** » 13 ноя 2016, 18:24

anonimus, и как такое реализовать, как показал SuperBatya, с помощью якоря, пример скиньте если не сложно.

Сообщение **anonimus** » 13 ноя 2016, 18:27

я вообще не понял, что там батя реализовал
открыл его проект, но у меня ничего не происходит

Сообщение **openair87** » 13 ноя 2016, 18:33

anonimus, откройте пример №1 который у него в архиве через браузер. У него когда вниз страницы уходишь появляется кнопка быстрого перехода вверх страницы. Как вы такое реализуете с помощью якоря ?

Сообщение **Necto** » 14 ноя 2016, 00:04

Да, я бы тоже хотел узнать поподробнее про якоря.

anonimus писал(а):Источник цитаты в новых версиях всё делается на якорях

11.1 достаточно новая для этого? Я не понимаю какой элемент должен указывать на якорь.

Сообщение **Alex15963** » 14 ноя 2016, 03:02

А я до сих пор пользуюсь старыми кнопками Alexa. Уж очень они мне нравятся. Спасибо ему. - viewtopic.php?f=11&t=1891

Сообщение **openair87** » 14 ноя 2016, 16:02

КАК РЕАЛИЗОВАТЬ (Может кому понадобится):

1. Прописываем на странице, на которой хотим реализовать кнопку быстрой прокрутки, между тегами <head> и </head>, следующий скрипт:

Код: Выделить всё

<head>
        <meta charset="utf-8"/>
       <title></title>
       <link rel="stylesheet" media="screen,projection" href="css/ui.totop.css"/>
        <meta name="viewport" content="width=device-width; initial-scale=1"/>
    </head>
<!-- jquery -->   
   
   <!-- easing plugin ( optional ) -->
   <script src="toptop/js/easing.js"></script>
   <!-- UItoTop plugin -->
   <script src="toptop/js/jquery.ui.totop.js"></script>
   <!-- Starting the plugin -->
   <script>   
         $(document).ready(function() {
            /*
            var defaults = {
                 containerID: 'toTop', // fading element id
               containerHoverID: 'toTopHover', // fading element hover id
               scrollSpeed: 1200,
               easingType: 'linear' 
             };
            */
            
            $().UItoTop({ easingType: 'easeOutQuart' }); // Эффект перехода (замедление - easeOutQuart, отскок - easeOutBounce)
            
         });
      
</script>
</head>

2. Скачиваем архив (прикреплён) и распаковываем, там 2 папки сss и toptop.
3. Через Web Builder в проекте вашего сайта добавляем эти папки в проект, чтобы они прописались. Для этого используем инструмент "Источник файла" и в нём выбираем (указываем путь) к этим 2-м папкам.

Всё, при публикации на сайте будет выскакивать кнопка прокрутки страницы вверх. Если хотите чтобы страница прокручивалась с отскоком, то в коде указанном выше пропишите easeOutBounce вместо easeOutQuart.
Если не нравится кнопка (цвет и т.д.), то открываете её в Photoshop или другом графическом редакторе и рисуете под ваш стиль, дизайн и т.д., потом забрасываете с заменой в папке (это toptop/img по умолчанию) и в картинки проекта вашего сайта. Размер кнопки 51х51 рх, если нужен больше или меньше прописывайте в файле ui.totop.css нужный вам размер и соответственно в графическом редакторе делаете размер какой вам надо.

Сообщение **SuperBatya** » 14 ноя 2016, 22:42

Все верно... У меня в исходнике сайта между head и head скрипт (смотри мой исходник WB)... Потом либо при просмотре (папка: C:\Users\имя\AppData\Local\Temp\preview\), либо при публикации закидываешь две папки (css и toptop) в корень и перезагружаешь страничку... В Photoshop'e свою кнопку можно замутить...
Если размер твоей кнопки будет другой (у меня 51х102), то исправь размеры в ui.totop.css...

Сообщение **Alex1972** » 15 ноя 2016, 15:34

Создаем прилипающий слой.Прозрачный.Небольшого размера.Так же указываем расположение{снизу-справа).В него картинку стрелки..Маркер(якорь) на месте куда надо вернуться.Если надо плавно,в свойствах якоря-время перехода.Далее на вставленном изо-ссылку на якорь.

Отправлено спустя 5 минут 25 секунд:
Так же можно по кол-ву кликов или по "ПРАВАЯ" или "ЛЕВАЯ" нажата-выбрать место куда скроллиться.Допустим-правая нажата-на шапку.Левая-на футер