Поправьте код плавной прокрутки на странице
Приветствую!
Только изучаю JavaScript, поэтому просьба знатоков поправить код плавной прокрутки на странице. Задача: 1. Плавная прокрутка по нажатию на ссылку-якорь. 2. Поскольку при ширине экрана от 992px "шапка" сайта фиксируется вверху окна браузера, то требуется отступ на её величину. 3. При ширине экрана менее 992px — небольшой отступ после прокрутки 13px для красоты. Нашёл на просторах интернета решение без отступа и дописал его таким образом: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $('a[href^="#"]').on('click', function(event) { var target = $(this.getAttribute('href')); var offsetDownLarge = 84; // Размер отступа после прокрутки при ширине экрана 992 и более var offsetDownSmall = 13; // Размер отступа после прокрутки при ширине экрана 991 и менее var clientWidth = document.body.clientWidth; if( target.length && clientWidth >= 992 ) { // Ширина экрана, начиная с которой «шапка» сайта фиксированная event.preventDefault(); $('html, body').stop().animate( { scrollTop: target.offset().top - offsetDownLarge }, 700); // Скорость прокрутки } else { event.preventDefault(); $('html, body').stop().animate( { scrollTop: target.offset().top - offsetDownSmall }, 700); // Скорость прокрутки } }); </script> Вроде работает, но подозреваю, что код некрасивый или может какие-то ошибки сделал... Поправьте более правильно, пожалуйста.:) |
Nikolay_1984,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> p{ height: 1500px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $('a[href^="#"]').on("click", function(event) { var target = $(this.getAttribute("href")); var offsetDownLarge = 84; var offsetDownSmall = 13; if (target.length) { event.preventDefault(); var clientWidth = document.body.clientWidth; var offset = clientWidth >= 992 ? offsetDownLarge : offsetDownSmall; var scroll = target.offset().top - offset; $("html, body").stop().animate({scrollTop: scroll}, 700); } }); }); </script> </head> <body> <a href="#slider" title="slider">slider</a> <p></p> <div id="slider">slider</div> <p></p> <script> </script> </body> </html> |
рони,
Спасибо! |
Nikolay_1984,
немного переделал, смотрите пример выше |
рони,
Правки вижу, спасибо! |
Часовой пояс GMT +3, время: 20:11. |