Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2018, 02:50
Новичок на форуме
Отправить личное сообщение для Nikolay_1984 Посмотреть профиль Найти все сообщения от Nikolay_1984
 
Регистрация: 13.02.2018
Сообщений: 3

Поправьте код плавной прокрутки на странице
Приветствую!
Только изучаю 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, 13.02.2018 в 02:55.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2018, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 13.02.2018 в 09:55.
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2018, 09:41
Новичок на форуме
Отправить личное сообщение для Nikolay_1984 Посмотреть профиль Найти все сообщения от Nikolay_1984
 
Регистрация: 13.02.2018
Сообщений: 3

рони,
Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2018, 09:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nikolay_1984,
немного переделал, смотрите пример выше
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2018, 10:27
Новичок на форуме
Отправить личное сообщение для Nikolay_1984 Посмотреть профиль Найти все сообщения от Nikolay_1984
 
Регистрация: 13.02.2018
Сообщений: 3

рони,
Правки вижу, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Если класс есть на странице, значит выполнить код! FreeZon Общие вопросы Javascript 11 10.08.2014 21:37
Проблема с jQuery плагином бесконечной прокрутки страницы Arhey jQuery 0 13.04.2013 01:13
один javaскрипт код на странице много раз Animemia Общие вопросы Javascript 23 04.02.2013 21:18
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Получить код js-скрипта, находящегося в файле на сервере RomanA Общие вопросы Javascript 4 04.04.2012 09:53