Задать вопрос
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>
  • Вопрос задан
  • 1378 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Elrock
@Elrock Автор вопроса
Проблема была в том что лишка была в теге и стр не скролилась а просто обновлялась
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@Cattorzen
А, я так понял вы критики в свой адрес вообще не воспринимаете, да тяжело же вам дальше в жизни придется, вот не первый раз встречаю таких самоучек и диву даюсь как у вас вообще хоть что-то в коде функционирует, насмотрятся гайдов, а потом сиди переделывай эти куски кода, вот видно что вы хочете и рыбки съесть и..., но в жизни так не бывает всему надо учится
Ответ написан
Комментировать
Комментировать
@med1um
Потому что matches() возвращает true когда элемент соответстует указанному селектору: https://developer.mozilla.org/ru/docs/Web/API/Elem...
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать обмен заказами 1с
11 мая 2024, в 00:19
1000 руб./за проект
Разработка сайта (верстка)
10 мая 2024, в 23:51
30000 руб./за проект
Опубликовать приложение в Google play
10 мая 2024, в 23:33
2500 руб./за проект
Ещё заказы