Задать вопрос
Elrock
@Elrock
javascript

Почему не работает scrollIntoView?

Не работает именно скролл, 
'use strict'

document.addEventListener('click', (e) =>{
  if(!e.target.matches('.menu-elements')){
    return
  }
  document.querySelector('.photos').scrollIntoView({ behavior: 'smooth' });
})

Ссылка на код
Html код
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="shortcut icon"
      href="img/52916-gory_skaly_noch_dom.jpg"
      type="image/png"
    />
    <script src="app.js" defer></script>
  </head>
  <body>
    <div class="main-page">
      <div>
        <nav class="main-page__menu">
          <ul>
            <a href="#"><li class="menu-elements">Home</li></a>
            <a href="#"><li class="menu-elements">About</li></a>
            <a href="#"><li class="menu-elements">Travel</li></a>
          </ul>
        </nav>
        <div class="main-page__title">
          <img src="img/Business Travel@1X.png" alt="" />
        </div>
        <div class="main-page__sub-title">
          For entrepreneurs and freelancers
        </div>
        <button class="main-page__button">MORE INFO</button>
      </div>
    </div>
    <main>
      <div class="wrapper about-us">
        <div class="info">
          <p class="info__title">About us</p>
          <h1 class="info__sub-title">
            WE WILL TURN YOUR WORK INTO AN EXCITING JOURNEY.
          </h1>
          <div class="info__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus
            purus in massa tempor nec feugiat nisl pretium fusce. Ac turpis
            egestas integer eget. Felis bibendum ut tristique et egestas quis
            ipsu.
          </div>
          <div class="info__text">
            sa massa ultricies mi quis hendrerit dolor magna. Facilisis leo vel
            fringilla est ullamcorper eget nulla facilisi etiam. Lectus arcu
            bibendum at varius. In massa tempor nec feugiat nisl. Mattis
            ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget.
            Adipiscing elit ut aliquam purus. Nunc pulvinar sapien et ligula
            ullam
          </div>
          <div>
            <button class="about-us__button">MORE INFO</button>
          </div>
        </div>
        <img class="about-us__picture" src="img/arka.png" alt="" />
      </div>
      <section class="photos">
        <div class="wrapper">
          <div class="title">PHOTOS OF OUR TRAVELS</div>
          <div class="sub-title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore
          </div>
          <div class="photos__gallery">
            <div class="img-group">
              <img src="img/1.png" alt="" class="img-proup__gallery" />
              <img src="img/2.png" alt="" class="img-proup__gallery" />
              <img src="img/3.png" alt="" class="img-proup__gallery" />
            </div>
            <div class="img-group">
              <img src="img/4.png" alt="" class="img-proup__gallery" />
              <img src="img/5.png" alt="" class="img-proup__gallery" />
              <img src="img/6.png" alt="" class="img-proup__gallery" />
            </div>
            <div class="img-group">
              <img src="img/7.png" alt="" class="img-proup__gallery" />
              <img src="img/8.png" alt="" class="img-proup__gallery" />
              <img src="img/9.png" alt="" class="img-proup__gallery" />
            </div>
          </div>
        </div>
      </section>
      <section class="travel">
        <div class="wrapper">
          <div class="title">TRAVEL WITH OUR COMPANY</div>
          <div class="sub-title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore
          </div>
          <div class="row">
            <div class="group">
              <img class="travel__img" src="img/travel__home.png" alt="" />
              <h3 class="travel__title">
                COMFORTABLE PREMIUM CLASS ACCOMMODATIONS
              </h3>
              <div class="travel__sub-title">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam.
              </div>
              <button class="travel__button">VIEW PHOTOS</button>
            </div>
            <div class="group width">
              <img class="travel__img" src="img/travel__man.png" alt="" />
              <h3 class="travel__title">
                WEEKLY GROUP ENTERTAINMENT AND EXCURSIONS
              </h3>
              <div class="travel__sub-title">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam.
              </div>
              <button class="travel__button">VIEW PHOTOS</button>
            </div>
          </div>
        </div>
      </section>
      <section class="tour wrapper">
        <img class="tour__img" src="img/tour__nature.png" alt="" />
        <div class="info">
          <div class="info__title">Next Tour</div>
          <h1 class="info__sub-title">UNFORGETTABLE ADVENTURE IN FILIPINAS</h1>
          <div class="info__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus
            purus in massa tempor nec feugiat nisl pretium fusce. Ac turpis
            egestas integer eget. Felis bibendum ut tristique et egestas quis
            ipsu.
          </div>
          <div class="info__text">
            sa massa ultricies mi quis hendrerit dolor magna. Facilisis leo vel
            fringilla est ullamcorper eget nulla facilisi etiam. Lectus arcu
            bibendum at varius. In massa tempor nec feugiat nisl. Mattis
            ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget.
            Adipiscing elit ut aliquam purus. Nunc pulvinar sapien et ligula
            ullam
          </div>
          <div class="info__text">
            Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Mauris
            rhoncus aenean vel elit scelerisque mauris. Pretium vulputate sapien
            nec sagittis aliquam malesuada. Lectus magna fringilla urna
            porttitor rhoncus dolor purus.
          </div>
        </div>
      </section>
      <div class="wrapper">
        <section class="form">
          <div class="group">
            <div class="form__title">BOOK A DISCOUNTER TOUR</div>
            <div class="form__subtitle">
              Mauris ultrices eros in cursus turpis
            </div>
          </div>
          <input class="form__input" type="name" placeholder="Name" />
          <input class="form__input" type="email" placeholder="Email" />
          <button class="form__button">SEND</button>
        </section>
      </div>
    </main>
    <div class="wrapper">
      <footer class="footer">
        <div class="group">
          <nav>
            <ul class="footer__menu">
              <a href="#"><li>HOME</li></a>
              <a href="#"><li>ABOUT</li></a>
              <a href="#"><li>GALLERY</li></a>
              <a href="#"><li>TRAVEL</li></a>
            </ul>
          </nav>
        </div>
        <div class="group">
          <div class="footer__title">Business travel</div>
          <div class="footer__sub-title">Travel 2019 | All rights reserved</div>
        </div>
      </footer>
    </div>
  </body>
</html>
  • Вопрос задан
  • 1548 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Elrock
@Elrock Автор вопроса
Проблема была в том что лишка была в теге и стр не скролилась а просто обновлялась
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@Cattorzen
А, я так понял вы критики в свой адрес вообще не воспринимаете, да тяжело же вам дальше в жизни придется, вот не первый раз встречаю таких самоучек и диву даюсь как у вас вообще хоть что-то в коде функционирует, насмотрятся гайдов, а потом сиди переделывай эти куски кода, вот видно что вы хочете и рыбки съесть и..., но в жизни так не бывает всему надо учится
Ответ написан
Комментировать
Комментировать
@med1um
Потому что matches() возвращает true когда элемент соответстует указанному селектору: https://developer.mozilla.org/ru/docs/Web/API/Elem...
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать верстку по макету
29 дек. 2024, в 20:50
10000 руб./за проект
Отладить запуск и развертывание фронтенда, обеспечить тестовый доступ
29 дек. 2024, в 18:02
15000 руб./за проект
Редизайн мобильного приложения
29 дек. 2024, в 18:01
12000 руб./за проект
Ещё заказы