23.08.2018, 17:43
|
Кандидат Javascript-наук
|
|
Регистрация: 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);//Передача ранее установленного интервала перемещения
}
|
|
23.08.2018, 19:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
DVV,
сделайте минимальный макет
|
|
23.08.2018, 19:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
|
|
23.08.2018, 19:15
|
Кандидат Javascript-наук
|
|
Регистрация: 26.12.2017
Сообщений: 125
|
|
|
|
23.08.2018, 19:24
|
Кандидат Javascript-наук
|
|
Регистрация: 26.12.2017
Сообщений: 125
|
|
Через такое пробовал. Ничего вообще не работает
document.querySelector("элемент на который нажимать").onclick = document.querySelector("элемент к которому крутить").scrollIntoView({behavior: 'smooth'});
|
|
23.08.2018, 19:42
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
DVV,
строка 63
Сообщение от DVV
|
window.location.hash = hash;
|
переделать на
history.pushState
строка 19
hashElementTop = 0;
сделать
hashElementTop = -80;
|
|
23.08.2018, 19:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
DVV,
строка 11 добавить event
function(event)
|
|
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.
|
|
23.08.2018, 20:38
|
Кандидат Javascript-наук
|
|
Регистрация: 26.12.2017
Сообщений: 125
|
|
Большое спасибо)) Вот если бы оно еще и в IE11 работало
|
|
23.08.2018, 20:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
DVV,
скопируйте код выше снова. исправлена ошибка в строке 68.
|
|
|
|