ObjectOne > JavaScript > Простая кнопка вверх на jq
Простая кнопка вверх на jq
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
1 библиотека с гугля
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> /* Наш скрипт его потом надо вынести за пределы этой страницы */ $(function(){ $.fn.scrollToTop = function(){ $(this).hide().removeAttr("href"); if ($(window).scrollTop() >= "280") $(this).fadeIn("slow") var scrollDiv = $(this); $(window).scroll(function(){ if ($(window).scrollTop() <= "280") $(scrollDiv).fadeOut("slow") /* 280 = эти значения лучше ставить одинаковыми, овтечают за появление иконки для прокрутки */ else $(scrollDiv).fadeIn("slow") }); $(this).click(function(){ $("html, body").animate({scrollTop: 0}, 1000) /* 1000 = Задаём скорость прокрутки */ }) } }); $(function(){ $("#Go_Top").scrollToTop(); }); </script> |
17 строчек jq
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> /* Рекомендуемые стили которые надо будет добавить в файлик css */ #Go_Top{ position: fixed; top: 45%; /* bottom: 0%; */ right: 0; cursor:pointer; display:none; } #Go_Top img{ width:50px; } </style> |
6 строчек css
|
1 |
<a href='#' id='Go_Top'><img class="img-responsive" src="img/up-arrow-icon-top.png" alt="Наверх" title="Наверх"></a> |
1 строчка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Простая кнопка вверх</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><!-- обязательная библиотека Библиотека https://developers.google.com/speed/libraries/ хостинг библиотек --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script> /* Наш скрипт его потом надо вынести за пределы этой страницы */ $(function(){ $.fn.scrollToTop = function(){ $(this).hide().removeAttr("href"); if ($(window).scrollTop() >= "280") $(this).fadeIn("slow") var scrollDiv = $(this); $(window).scroll(function(){ if ($(window).scrollTop() <= "280") $(scrollDiv).fadeOut("slow") /* 280 = эти значения лучше ставить одинаковыми, овтечают за появление иконки для прокрутки */ else $(scrollDiv).fadeIn("slow") }); $(this).click(function(){ $("html, body").animate({scrollTop: 0}, 1000) /* 1000 = Задаём скорость прокрутки */ }) } }); $(function(){ $("#Go_Top").scrollToTop(); }); </script> <style> /* Рекомендуемые стили которые надо будет добавить в файлик css */ #Go_Top{ position: fixed; top: 45%; /* bottom: 0%; */ right: 0; cursor:pointer; display:none; } #Go_Top img{ width:50px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"> <p>Левая колонка</p> </div> <div class="col-md-8"> <?php ?> <br /><br /> <h4>Нам потребуется 17 строчек jq, 6 строчек css, 1 библиотека с гугля, и 1 строчка html</h4> <br /> <a href='#' id='Go_Top'><img class="img-responsive" src="img/up-arrow-icon-top.png" alt="Наверх" title="Наверх"></a> <p>Тестовый текст один два три четыре Тестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыреТестовый текст один два три четыре</p> </div> <div class="col-md-2"> <p>Правая колонка</p> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
И на всякий случай весь код нашей страницы html.
Добавьте параграфов и прокрутите страницу, «кнопка вверх» появиться справа.
И сама страница: Простая кнопка вверх
Количество просмотров: 663
| Категория: JavaScript, Вёрстка
| Тэги: JavaScript / jQuery
