БЛОГ НА HUSL


Почему некорректно определяется offset().top и скролл отрабатывает не до нужной позиции?

Автор вопроса: Вася

Есть 3 блока и верхнее меню навигации, каждый пункт из которых ведёт к началу соответствующего блока. Внутри 2го блока есть тоже ссылка link3, которая в свою очередь ведёт к 3ему блоку, но по какой-то причине неправильно высчитывается offset().top и переносит не в начало блока, а куда-то ближе к концу. Как исправить?

const accItem = document.getElementsByClassName('accordionItem');
const accHD = document.getElementsByClassName('accordionItem__wrapper');
const arrow = document.querySelectorAll('.accordionItem__img');

for (i = 0; i < accHD.length; i++) {
  accHD[i].addEventListener('click', toggleItem, false);
}

function toggleItem() {
  const itemClass = this.parentNode.className;

  for (i = 0; i < accItem.length; i++) {
    accItem[i].className = 'accordionItem closeItem';
  }

  if (itemClass == 'accordionItem closeItem') {
    this.parentNode.className = 'accordionItem openItem';
  }
}
$('[href*="#"]').on('click', function(e) {
  $('html,body').stop().animate({
    scrollTop: $(this.hash).offset().top - $('.header').innerHeight()
  }, 1000);
});
nav,
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

li {
  margin-right: 20px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

.accordionItemHeading {
  cursor: pointer;
  padding: 10px 20px 8px 37px;
  border: 1px solid #404A9F;
  box-sizing: border-box;
  border-radius: 8px;
}

.accordionItemHeading:hover {
  border-color: #33CC66;
}

.accordionItemHeading h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
  color: #3F3F3F;
  margin-bottom: 0;
}

.accordionItemHeading a {
  display: none;
  position: relative;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  color: #33CC66;
  margin-right: 30px;
}

.accordionItemHeading a:before {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  left: 0;
}

.closeItem .accordionItemContent {
  height: 0px;
  transform: scaleY(0);
  display: block;
}

.openItem .accordionItemHeading {
  border-color: #33CC66;
}

.openItem .accordionItemHeading a {
  display: inline-block;
}

.openItem .accordionItemContent {
  font-size: 14px;
  line-height: 150%;
  color: #484848;
  padding: 21px 24px 29px 37px;
  width: 100%;
  margin: 0px 0px 10px 0px;
  display: block;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
  box-sizing: border-box;
  border: 1px solid #33CC66;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media screen and (max-width: 767px) {
  .openItem .accordionItemContent {
    padding: 15px;
  }
}

.accordionItemHeading__block {
  margin-bottom: 30px;
}

.accordionItemHeading__block span {
  display: block;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 170%;
  color: #9FA4CF;
  margin-bottom: 3px;
}

.accordionItemHeading__block p {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 170%;
  color: #3F3F3F;
}

.accordionItemHeading__block p a {
  color: #404A9F;
  text-decoration-line: underline;
}

.openItem .accordionItemHeading {
  margin: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordionItemContent__bold p {
  font-weight: 700;
}

.accordionItemContent__red p {
  color: $red;
}

.accordionItem {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.accordionItem:last-child {
  margin-bottom: 0;
}

.accordionItem__wrapper {
  position: relative;
}

.accordionItemContent p {
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 21px;
}

.openItem .accordionItem__img {
  transform: rotate(90deg);
  transition: all .25s ease-in-out;
  background-color: #33CC66;
}

.openItem .accordionItemHeading {
  border-bottom: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-lg-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-lg-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <header class="header">
    <nav>
      <ul>
        <li><a href="#block1">Link 1</a></li>
        <li><a href="#block2">Link 2</a></li>
        <li><a href="#block3">Link 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="block1">
      <h2>Block 1</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div class="accordionWrapper">
        <div class="accordionItem openItem">
          <div class="accordionItem__wrapper">
            <div class="accordionItemHeading">
              <div><a href="#block3" class="accordionItemHeading__arrange">Link 3</a>
              </div>
            </div>
          </div>
          <div class="accordionItemContent">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div id="block2">
      <h2>Block 2</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    </div>
    <hr />
    <div id="block3">
      <h2>Block 3</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </main>
</section>


Источник

Ответы (2 шт):

Автор решения: V-tyna

Вместо .on() используй addEventListener.

 $('[href*="#"]').addEventListener('click', function(e) {
      $('html,body').stop().animate({
        scrollTop: $(this.hash).offset().top - $('.header').innerHeight()
      }, 1000);});
→ Ссылка
Автор решения: Вася

Переписал цикл

for (i = 0; i < accHD.length; i++) {
  accHD[i].addEventListener('click', toggleItem, false);
}

и функцию toggleItem и заработало

const accHD = document.querySelectorAll('.accordionItem__wrapper');

if (typeof(accHD) != 'undefined' && accHD != null && accHD.length !== 0) {
  accHD.forEach(el => {
    el.addEventListener('click', event => {
      event.preventDefault();
      const el_siblings = el.closest('.accordionWrapper').querySelectorAll('.accordionItem');
      el_siblings.forEach(s => {
        if (s.classList.contains('openItem')) {
          s.classList.remove('openItem');
          s.classList.add('closeItem');
        }
      });

      if (el.parentNode.classList.contains('closeItem')) {
        el.parentNode.classList.remove('closeItem');
      }
      el.parentNode.classList.add('openItem');

    });
  });
}

$('[href*="#"]').on('click', function(e) {
  $('html,body').stop().animate({
    scrollTop: $(this.hash).offset().top - $('.header').innerHeight()
  }, 1000);
});
nav,
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

li {
  margin-right: 20px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

.accordionItemHeading {
  cursor: pointer;
  padding: 10px 20px 8px 37px;
  border: 1px solid #404A9F;
  box-sizing: border-box;
  border-radius: 8px;
}

.accordionItemHeading:hover {
  border-color: #33CC66;
}

.accordionItemHeading h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
  color: #3F3F3F;
  margin-bottom: 0;
}

.accordionItemHeading a {
  display: none;
  position: relative;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  color: #33CC66;
  margin-right: 30px;
}

.accordionItemHeading a:before {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  left: 0;
}

.closeItem .accordionItemContent {
  height: 0px;
  transform: scaleY(0);
  display: block;
}

.openItem .accordionItemHeading {
  border-color: #33CC66;
}

.openItem .accordionItemHeading a {
  display: inline-block;
}

.openItem .accordionItemContent {
  font-size: 14px;
  line-height: 150%;
  color: #484848;
  padding: 21px 24px 29px 37px;
  width: 100%;
  margin: 0px 0px 10px 0px;
  display: block;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease;
  box-sizing: border-box;
  border: 1px solid #33CC66;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media screen and (max-width: 767px) {
  .openItem .accordionItemContent {
    padding: 15px;
  }
}

.accordionItemHeading__block {
  margin-bottom: 30px;
}

.accordionItemHeading__block span {
  display: block;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 170%;
  color: #9FA4CF;
  margin-bottom: 3px;
}

.accordionItemHeading__block p {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 170%;
  color: #3F3F3F;
}

.accordionItemHeading__block p a {
  color: #404A9F;
  text-decoration-line: underline;
}

.openItem .accordionItemHeading {
  margin: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordionItemContent__bold p {
  font-weight: 700;
}

.accordionItemContent__red p {
  color: $red;
}

.accordionItem {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.accordionItem:last-child {
  margin-bottom: 0;
}

.accordionItem__wrapper {
  position: relative;
}

.accordionItemContent p {
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 21px;
}

.openItem .accordionItem__img {
  transform: rotate(90deg);
  transition: all .25s ease-in-out;
  background-color: #33CC66;
}

.openItem .accordionItemHeading {
  border-bottom: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-lg-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-lg-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <header class="header">
    <nav>
      <ul>
        <li><a href="#block1">Link 1</a></li>
        <li><a href="#block2">Link 2</a></li>
        <li><a href="#block3">Link 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div id="block1">
      <h2>Block 1</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div class="accordionWrapper">
        <div class="accordionItem openItem">
          <div class="accordionItem__wrapper">
            <div class="accordionItemHeading">
              <div><a href="#block3" class="accordionItemHeading__arrange">Link 3</a>
              </div>
            </div>
          </div>
          <div class="accordionItemContent">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div id="block2">
      <h2>Block 2</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    </div>
    <hr />
    <div id="block3">
      <h2>Block 3</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </main>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.