Приветствую!
Только изучаю 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>
Вроде работает, но подозреваю, что код некрасивый или может какие-то ошибки сделал... Поправьте более правильно, пожалуйста.
