Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2018, 17:43
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Как изменить параметр для плавной прокрутки экрана
Написал код для плавной прокрутки экрана, но не могу теперь найти способ немного его подправить. Дело в том, что при прокрутке меню налазит на заголовок секции https://yadi.sk/i/IU_N_JHC3aVxQC
А хотелось бы вот так: https://yadi.sk/i/Md3-S5su3aVxUm

//Передача в переменную всех элементов html на странице
let elements = document.documentElement,
	body = document.body,//Передаем в переменную body
	links = document.links;//Получаем все якорные ссылки на странице

//Функция опредления нажатой ссылки и расчета перемещения
function calcScroll() {

//Перебор циклом все ссылок и определение той, на которой был сделан клик
  for (let i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      //Определение и округление текущего расстояния от верха документа
      let scrollTop = Math.round(body.scrollTop || elements.scrollTop);
      if (this.hash !== '') {
//Предотвращение действия браузера по дефолту при отсутвии атрибута hash у элемента
        event.preventDefault();
//Получение элемента, к которому ведет якорь нажатой ссылки
        let hashElement = document.getElementById(this.hash.substring(1)),
			hashElementTop = 0;
//Вычисление через цикл расстояния от верха до элемента, к которому ведет нажатая ссылка
        while (hashElement.offsetParent) {
          hashElementTop += hashElement.offsetTop;
          hashElement = hashElement.offsetParent;
        }
        //Получение округленного значения расположения элемента
        hashElementTop = Math.round(hashElementTop);
/* Функция запуска плавного перемещения (содержит аргументы: текущее растояние от верха
документа, расстояние от верха документа к контентному блоку, к которому ведет нажатая 
ссылка и сам контентный блок) */
        smoothScroll(scrollTop, hashElementTop, this.hash);
      }
    };
  }
};
calcScroll();

let timeInterval = 1, //Задаем временной интервал в 1 миллисекунду
		prevScrollTop,
		speed;

//Функция плавной прокрутки
function smoothScroll(from, to, hash) {
/* Если элемент (конечная точка движения) расположен ниже текущей точки экрана,
то scroll ведется с верху вниз (положительное значение), если наоборот, то снизу
вверх (отрицательное значение) */
	if (to > from) {
		speed = 10;
	} else {
		speed = -10;
	}
//Установка интервала движения
  let move = setInterval(function() {
//Получение и округение текущей позиции экрана
    scrollTop = Math.round(body.scrollTop || elements.scrollTop);
//Условия прекращения или продолжения движения
    if (
      prevScrollTop === scrollTop ||
      (to > from && scrollTop >= to) ||
      (to < from && scrollTop <= to)
    ) {
      clearInterval(move);
//Добавление атрибута hash в url после прокрутки (добавляется к адресной строке в браузере)
      window.location.hash = hash;
    } else {
      body.scrollTop += speed;
      elements.scrollTop += speed;
/* Передача текущей позиции экрана в переменную, которая при последующих перемещениях
будет играть роль места хранения последней позиции экрана */
      prevScrollTop = scrollTop;
    }
  }, timeInterval);//Передача ранее установленного интервала перемещения
}
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2018, 19:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
сделайте минимальный макет
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2018, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
Плавная прокрутка к элементу
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2018, 19:15
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

https://cdn.rawgit.com/ViacheslavDem...c75/index.html
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2018, 19:24
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Через такое пробовал. Ничего вообще не работает
document.querySelector("элемент на который нажимать").onclick = document.querySelector("элемент к которому крутить").scrollIntoView({behavior: 'smooth'});
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2018, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
строка 63
Сообщение от DVV
window.location.hash = hash;
переделать на
history.pushState
строка 19
hashElementTop = 0;
сделать
hashElementTop = -80;
Ответить с цитированием
  #7 (permalink)  
Старый 23.08.2018, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
строка 11 добавить event
function(event)
Ответить с цитированием
  #8 (permalink)  
Старый 23.08.2018, 19:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
и того ...
//Плавная прокрутка

//Передача в переменную всех элементов html на странице
let elements = document.documentElement,
    body = document.body,//Передаем в переменную body
    links = document.links;//Получаем все якорные ссылки на странице

//Функция опредления нажатой ссылки и расчета перемещения
function calcScroll() {

//Перебор циклом все ссылок и определение той, на которой был сделан клик
    for (let i = 0; i < links.length; i++) {
        links[i].onclick = function(event) {

            //Определение и округление текущего расстояния от верха документа
            let scrollTop = Math.round(body.scrollTop || elements.scrollTop);
            if (this.hash !== '') {
//Предотвращение действия браузера по дефолту при отсутвии атрибута hash у элемента
                event.preventDefault();
//Получение элемента, к которому ведет якорь нажатой ссылки
                let hashElement = document.getElementById(this.hash.substring(1)),
            hashElementTop = -80;
//Вычисление через цикл расстояния от верха до элемента, к которому ведет нажатая ссылка
                while (hashElement.offsetParent) {
                    hashElementTop += hashElement.offsetTop;
                    hashElement = hashElement.offsetParent;
                }
                //Получение округленного значения расположения элемента
                hashElementTop = Math.round(hashElementTop);
/* Функция запуска плавного перемещения (содержит аргументы: текущее растояние от верха
документа, расстояние от верха документа к контентному блоку, к которому ведет нажатая
ссылка и сам контентный блок) */

                smoothScroll(scrollTop, hashElementTop, this.hash);
            }
        };
    }
};
calcScroll();

let timeInterval = 1, //Задаем временной интервал в 1 миллисекунду
        prevScrollTop,
        speed;

//Функция плавной прокрутки
function smoothScroll(from, to, hash) {
/* Если элемент (конечная точка движения) расположен ниже текущей точки экрана,
то scroll ведется с верху вниз (положительное значение), если наоборот, то снизу
вверх (отрицательное значение) */
    if (to > from) {
        speed = 10;
    } else {
        speed = -10;
    }

//Установка интервала движения
    let move = setInterval(function() {
//Получение и округение текущей позиции экрана
        scrollTop = Math.round(body.scrollTop || elements.scrollTop);
//Условия прекращения или продолжения движения
        if (
            prevScrollTop === scrollTop ||
            (to > from && scrollTop >= to) ||
            (to < from && scrollTop <= to)
        ) {
            clearInterval(move);
//Добавление атрибута hash в url после прокрутки (добавляется к адресной строке в браузере)
history.pushState(history.state, document.title, location.href.replace(/#.*$/g, '') + hash);
           
        } else {
            body.scrollTop += speed;
            elements.scrollTop += speed;
/* Передача текущей позиции экрана в переменную, которая при последующих перемещениях
будет играть роль места хранения последней позиции экрана */
            prevScrollTop = scrollTop;
        }
    }, timeInterval);//Передача ранее установленного интервала перемещения
}

Последний раз редактировалось рони, 23.08.2018 в 20:48.
Ответить с цитированием
  #9 (permalink)  
Старый 23.08.2018, 20:38
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Большое спасибо)) Вот если бы оно еще и в IE11 работало
Ответить с цитированием
  #10 (permalink)  
Старый 23.08.2018, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

DVV,
скопируйте код выше снова. исправлена ошибка в строке 68.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подключить JQUery при разработке расширения для OPERA? Romingood jQuery 1 24.10.2012 11:25
Использование window.open() для позиционирования окна в середине экрана marat-chessman Events/DOM/Window 13 14.08.2011 20:20
Как запомнить в переменную параметр объкта style? Paska Элементы интерфейса 6 10.05.2010 22:09
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 13:08
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30