1

При нажатии на ссылку производиться скролл. Мне необходимо, что бы при скролле нажав на другую ссылку, поменялся приоритет и изменения скролла производились уже в другое место.

Сейчас переходы выглядят так:

function getElemClass(name) {
  return document.getElementsByClassName(name);
}

function getElemId(name) {
  return document.getElementById(name);
}

function scrollToElement(duration, on, aim) {
  return function(e) {
    let target = e.target;
    let _aim = aim || this.href || target.href;

    //Цикл двигается вверх от target к родителям.
    if (!_aim) {
      while (target != this) {
        target = target.parentNode;
        //Поиск интересующего элемента
        if (target.tagName === "A") {
          _aim = target.href;
          break;
        }
      }
    }

    if (!_aim) return;

    _aim = _aim.substring(_aim.indexOf("#"));

    let distance = Math.abs($(on)[0].getBoundingClientRect().top -
      $(_aim)[0].getBoundingClientRect().top);

    e.preventDefault();

    $(on).animate({
      scrollTop: distance
    }, duration);
  }
}

getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

#header {
  height: 800px;
  background: #312;
}

#main {
  height: 800px;
  background: #653;
}

#footer {
  height: 800px;
  background: #762;
}

.nav {
  position: fixed;
  font-size: 30px;
  background: #764;
  padding: 10px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__link {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav class="nav">
    <li class="nav__item">
      <a href="#header" class="nav__link">Header</a>
    </li>
    <li class="nav__item">
      <a href="#main" class="nav__link">Main</a>
    </li>
    <li class="nav__item">
      <a href="#footer" class="nav__link">Footer</a>
    </li>
  </nav>
  <header id="header"></header>
  <main id="main"></main>
  <footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</html>

Необходимо так:

function getElemClass(name) {
  return document.getElementsByClassName(name);
}

function getElemId(name) {
  return document.getElementById(name);
}

function scrollToElement(duration, on, aim) {
  return function(e) {
    let target = e.target;
    let _aim = aim || this.href || target.href;

    //Цикл двигается вверх от target к родителям.
    if (!_aim) {
      while (target != this) {
        target = target.parentNode;
        //Поиск интересующего элемента
        if (target.tagName === "A") {
          _aim = target.href;
          break;
        }
      }
    }

    if (!_aim) return;

    _aim = _aim.substring(_aim.indexOf("#"));

    let distance = Math.abs($(on)[0].getBoundingClientRect().top -
      $(_aim)[0].getBoundingClientRect().top);

    e.preventDefault();

    getElemId(_aim.split('#')[1]).scrollIntoView({
      behavior: 'smooth'
    });
  }
}

getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

#header {
  height: 1200px;
  background: #312;
}

#main {
  height: 1200px;
  background: #653;
}

#footer {
  height: 1200px;
  background: #135;
}

.nav {
  position: fixed;
  font-size: 30px;
  background: #764;
  padding: 10px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__link {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav class="nav">
    <li class="nav__item">
      <a href="#header" class="nav__link">Header</a>
    </li>
    <li class="nav__item">
      <a href="#main" class="nav__link">Main</a>
    </li>
    <li class="nav__item">
      <a href="#footer" class="nav__link">Footer</a>
    </li>
  </nav>
  <header id="header"></header>
  <main id="main"></main>
  <footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</html>

P.S: Второй вариант не очень подходит, из-за поддержки и не имение возможно контролировать интервал. Будет даже хорошо, если будет вариант на чистом js, который можно будет настроить, но самое главное, что бы события между собой не конфликтовали.

1 ответ 1

1

Решил при помощи метода stop - Jquery.

function getElemClass(name) {
  return document.getElementsByClassName(name);
}

function getElemId(name) {
  return document.getElementById(name);
}

let animationState = false;

function animateScroll(duration, on, distance) {
  $(on).animate({
    scrollTop: distance
  }, duration, function() {
    animationState = false;
  });
}

function scrollToElement(duration, on, aim) {
  return function(e) {
    let target = e.target;
    let _aim = aim || this.href || target.href;

    //Цикл двигается вверх от target к родителям.
    if (!_aim) {
      while (target != this) {
        target = target.parentNode;
        //Поиск интересующего элемента
        if (target.tagName === "A") {
          _aim = target.href;
          break;
        }
      }
    }

    if (!_aim) return;

    _aim = _aim.substring(_aim.indexOf("#"));

    let distance = Math.abs($(on)[0].getBoundingClientRect().top -
      $(_aim)[0].getBoundingClientRect().top);

    e.preventDefault();

    if (animationState) {
      $(on).stop();
      animateScroll(duration, on, distance);
      return;
    }
    animationState = true;

    animateScroll(duration, on, distance);
  }
}

document.addEventListener("click", scrollToElement(1000, "html"));
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

#header {
  height: 1200px;
  background: #312;
}

#main {
  height: 1200px;
  background: #653;
}

#footer {
  height: 1200px;
  background: #135;
}

.nav {
  position: fixed;
  font-size: 30px;
  background: #764;
  padding: 10px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__link {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav class="nav">
    <li class="nav__item">
      <a href="#header" class="nav__link">Header</a>
    </li>
    <li class="nav__item">
      <a href="#main" class="nav__link">Main</a>
    </li>
    <li class="nav__item">
      <a href="#footer" class="nav__link">Footer</a>
    </li>
  </nav>
  <header id="header"></header>
  <main id="main"></main>
  <footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.