Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи. Для начала разберёмся с HTML-кодом: <div id="content">Контент</div> <div id="top">Наверх</div> Перейдём к стилям: #content { background-color: #ff0; height: 3000px; } #top { bottom: 0; cursor: pointer; display: none; font-size: 150%; position: fixed; right: 0; } Безусловно, стили могут быть любыми. Главное, у кнопки "наверх" поставить изначально display: none; и position: fixed; с соответствующими координатами размещения, чтобы она всегда находилась в конкретном месте, независимо от положения полосы прокрутки. И, наконец, JavaScript, в котором мы используем jQuery: <script type="text/javascript"> var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх" var delay = 1000; // Задержка прокрутки $(document).ready(function() { $(window).scroll(function () { // При прокрутке попадаем в эту функцию /* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */ if ($(this).scrollTop() > top_show) $('#top').fadeIn(); else $('#top').fadeOut(); }); $('#top').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию /* Плавная прокрутка наверх */ $('body, html').animate({ scrollTop: 0 }, delay); }); }); </script> Вот таким образом реализуется плавная прокрутка скролла на jQuery, а также плавный вывод кнопки "Наверх" при соответствующем положении скролла. Если Вы хотите самостоятельно научиться писать подобные скрипты, то пройдите курс.