{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка \"вверх\" на сайте где контента больше чем 3 экрана просто необходима. Я, например, всегда ищу такую когда проскролю сайт даже на несколько блоков и мне снова нужно вернуться на верх.","type":"unstyled","key":"4cnin"},{"data":{"image":{"id":"5cbf049488da1e00b5609b68"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3tu11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":115,"style":"BOLD"},{"length":18,"offset":133,"style":"BOLD"}],"text":"Я перепробовал много способов, от чистого css до разных плагинов js (как же я их не люблю...). В итоге написал сам идеальное решение под любой браузер. Страничка плавно поднимается вверх, не моментально, что смотрится очень даже хорошо.","type":"unstyled","key":"eljmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":11,"style":"BOLD"},{"length":9,"offset":43,"style":"BOLD"}],"text":"Приступим. Новички - читаем все по порядку. Профи и те кто уже работал с js на сайте - могут пропустить следующий абзац.","type":"unstyled","key":"eoc50"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":18,"offset":81}],"inlineStyleRanges":[{"length":19,"offset":239,"style":"BOLD"},{"length":71,"offset":296,"style":"ITALIC"},{"length":89,"offset":428,"style":"ITALIC"}],"text":"В head обязательно должна быть подключена библиотека js. Можно ее скачать отсюда библиотека jquery. Если вместо скачивания открылся код, то создайте в корне Вашего сайта папку js (если таковой нет, что будет странно) и в ней создайте файл jquery-3.4.0.min.js. Далее между head в сайте подключаем . Есть способ попроще, просто подключить через сервисы гугла: (вставляем также между head).","type":"unstyled","key":"f3b4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, библиотека подключена, будем писать код самой функции:","type":"unstyled","key":"aur29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":"\t","type":"unstyled","key":"5a533"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше вставить код в блок который есть на каждой странице, например в footer, чем дублировать его на все.","type":"unstyled","key":"9subv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Разберемся... Что мы здесь видим? При клике по тексту/картинке/div-у обернутому в тег с параметром hreff (все правильно, 2 буквы \"f\"), нас будет переносить к элементу с id = \"значение внутри параметра hreff\". Перед значением пишем #. Значение 500 указывает на скорость перемещения к блоку, в данном случае 0.5 секунд.","type":"unstyled","key":"5j0rq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Для примера:","type":"unstyled","key":"c2a4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вверху страницы вставляем:\n ","type":"unstyled","key":"6jrob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В футер (или просто в самый низ страницы, чтобы с z-index было меньше конфликтов):\n

\nВ итоге получится кнопка справа внизу, немного прозрачная, ширина 40px. Кнопку можно изобразить в фотошопе или поискать в поиске яндекса по запросу \"стрелка вверх png\". Вместо картинки можно вставить текст. Если кнопка прячется за какими-нибудь \"абсолютными\" элементами сайта, то прикрутите ей z-index:99999999999; например или впишите свой уровень, если конечно их считаете как правильный верстальщик)).\n\nКстати, данную штуку можно применять не только для кнопки \"вверх\", но и для перемещения к любому элементу сайта. Просто добавляем еще кнопок и \"якорей\" (это я про это: ), с разными именами. Код функции дублировать не нужно, она готова отрабатывать все элементы.\n\nP.S.: Почему \"hreff\", а не \"href\"? Потому что во втором случае в некоторых браузерах нас сначала переносит без анимации к якорю куда хотели перенестись, затем назад и потом уже красиво и анимировано переносит, что не по красоте совсем... В каком-то браузере даже обновлялась страничка и потом переносило куда нужно...","type":"unstyled","key":"3b7gf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":122,"offset":0,"style":"BOLD"}],"text":"У меня на сегодня все! Спасибо что прочитали до конца) Люблю комментарии ;) Предлагайте свои решения (только проверенные).\n\n","type":"unstyled","key":"1rb0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"jRZn0EMdpA0qE0jsAL9c"}],"entityMap":{"0":{"data":{"url":"https://code.jquery.com/jquery-3.4.0.min.js"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}