5

Есть landing page. такой html:

<div class="get-start-area">
<input type="email" class="form-control email" placeholder="[email protected]">
<input type="submit" class="submit" value="Get Started">
</div>

И такой скрипт:

(function() {
  'use strict';
  var btnScrollDown = document.querySelector('.submit');
  function scrollDown() {
    var windowCoords = document.documentElement.clientHeight;
    (function scroll() {
      if (window.pageYOffset < windowCoords) {
        window.scrollBy(0, 10);
        setTimeout(scroll, 10);
      }
      if (window.pageYOffset > windowCoords) {
        window.scrollTo(0, windowCoords);
      }
    })();
  }
  btnScrollDown.addEventListener('click', scrollDown);
})();

После нажатия на Get Started должен происходить скролл до раздела контакты, внизу, но скролл идет только одну секунду до ближайшего блока. Как нужно изменить значения в скрипте чтобы скролл длился дольше?

вот html, области контакты:

<section class="footer-contact-area section_padding_100 clearfix" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <!-- Heading Text  -->
                    <div class="section-heading">
                        <h2>Subscribe!</h2>
                        <div class="line-shape"></div>
                    </div>
                    <div class="footer-text">
                        <p>We`ll send you weekly news to make your app more convinient. Stay tune.</p>
                    </div>

                </div>
                <div class="col-md-6">
                    <!-- Form Start-->
                    <div class="contact_from">
                        <form action="#" method="post">
                            <!-- Message Input Area Start -->
                            <div class="contact_input_area">
                                <div class="row">
                                    <!-- Single Input Area Start -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required>
                                        </div>
                                    </div>
                                    <!-- Single Input Area Start -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="email" class="form-control" name="email" id="email" placeholder="Your E-mail" required>
                                        </div>
                                    </div>
                                    <!-- Single Input Area Start -->
<!--
                                    <div class="col-12">
                                        <div class="form-group">
                                            <textarea name="message" class="form-control" id="message" cols="30" rows="4" placeholder="Your Message *" required></textarea>
                                        </div>
                                    </div>
-->
                                    <!-- Single Input Area Start -->
                                    <div class="col-12">
                                        <button type="submit" class="btn submit-btn">Send Now</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Message Input Area End -->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
5
  • 1
    Пожалуйста, прочтите: минимальный воспроизводимый пример
    – Bharatha
    16 ноя 2018 в 10:23
  • @Bharata я добавил. посмотрите пожалуйста
    – timur
    16 ноя 2018 в 10:47
  • есть простйо варинат скрола по id <a hred="#constacts">к контактам</a>
    – Саске
    16 ноя 2018 в 12:17
  • @Санитариум тогда он в строке браузере отображается #contact и и потом не удаляется оттуда + нет плавного перехода
    – timur
    16 ноя 2018 в 12:26
  • @timur, вы добавили, но не то. Прочитайте по моей ссылке внимательно.
    – Bharatha
    16 ноя 2018 в 22:41

4 ответа 4

3

Данный способ совмещает в себе два "скролла до элемента":
"Стандартный" (или target) и "анимированный" при клике

$('[href^="#"]').on('click', function(){
  let href = $(this).attr('href'), elem = $(document).find(href);
  if(elem.length > 0) {
    let posY = elem.eq(0).offset().top;
    $('html, body').animate({
      scrollTop: posY
    }, 1000);
  }
  return false;
});
.list {
  display: block;
  width: 100%;
  height: 40px;
  background: gray;
  position: fixed;
  left: 0; top: 0; right: 0;
  padding: 0 10px;
  box-sizing: border-box;
}

.list > a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none !important;
}

.list > a:not(:last-child) {
  margin-right: 5px;
}

.list > a:hover {
  color: red;
}

.item {
  display: block;
  width: 100%; 
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-size: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list">
  <a href="#item1">Item 1</a>
  <a href="#item2">Item 2</a>
  <a href="#item3">Item 3</a>
  <a href="#item4">Item 4</a>
  <a href="#item5">Item 5</a>
</div>

<div id="item1" class="item">Item 1</div>
<div id="item2" class="item">Item 2</div>
<div id="item3" class="item">Item 3</div>
<div id="item4" class="item">Item 4</div>
<div id="item5" class="item">Item 5</div>

Плюсы

  • Если после нажатия скопировать ссылку из адресной строки и перейти по ней, то "в поле зрения" будет тот самый блок, к которому был произведён "анимированный скролл".

Минусы

  • Использует JQuery (может и не минус для кого-то)
  • Текущее положение находится "далеко" от того, к которому будет выполнен скролл, то "скролл" произойдёт быстро.
2

var updownElem = document.getElementById('down');

var pageYLabel = 0;

updownElem.onclick = function() {
  var pageY = window.pageYOffset || document.documentElement.scrollTop;

  switch (this.className) {
    case 'down':
      pageYLabel = pageY;

      window.scrollTo(0, 1000);
      this.className = 'down';
  }
}
.button {
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100px;
  margin: 0 auto;
  padding: 10px;
  background: blue;
  border: 2px solid pink;
  border-radius: 100px;
  color: white;
}
<div style="position: absolute; width: 186px; height: 82px; z-index: 5; left:124px; top:100px">
  <div class="button">
    <span lang="en-us" style="cursor: poiner; text-aling: center;" id="down" class="down">JOIN</span>
  </div>
</div>
<div style="position: absolute; width: 186px; height: 82px; z-index: 5; left:124px; top:700px">
  Привет!
</div>

1
1
$('.js-btn').click(() => {
    $('html, body').animate({
        scrollTop: $('.js-section').offset().top
    }, 200);
});
2
  • не работает так вообще( как еще можно сделать?
    – timur
    16 ноя 2018 в 15:27
  • все работает если jQuery подключено. Саске спасибо за код
    – Леха
    14 ноя 2020 в 13:46
0

Рекомендую использовать такой скрипт.

В тег <а> Вы добавляете класс .following_scroll, а в href указываете id элемента к которому опуститься, в данном случае div с id="service"

$('.flowing-scroll').on('click', function() {
  var el = $(this);
  var dest = el.attr('href'); // получаем направление
  if (dest !== undefined && dest !== '') { // проверяем существование
    $('html').animate({
        scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу
      }, 500 // скорость прокрутки
    );
  }
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#service" class="scroll_down flowing-scroll">scroll down</a>
<div class="service" id="service"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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