Скролл вниз по нажатию кнопки CSS

150

22 апреля 2019, 21:20

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

<div class="get-start-area">
<input type="email" class="form-control email" placeholder="name@company.com">
<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>

Answer 1

$('.js-btn').click(() => {
    $('html, body').animate({
        scrollTop: $('.js-section').offset().top
    }, 200);
});

Answer 2

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

В тег <а> Вы добавляете класс .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>