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

#javascript #html #css

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







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

(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, области контакты:


        

            

                

                    
                    

                        
Subscribe!
                        

                    
                    

                        
We`ll send you weekly news to make your app more convinient.
Stay tune.
                    

                
                

                    
                    

                        

                            
                            

                                

                                    
                                    

                                        

                                            
                                        
                                    
                                    
                                    

                                        

                                            
                                        
                                    
                                    

                                    
                                    

                                        
                                    
                                
                            
                            
                        
                    
                
            
        
    

    

Ответы

Ответ 1

Данный способ совмещает в себе два "скролла до элемента":
"Стандартный" (или 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;
}



  Item 1
  Item 2
  Item 3
  Item 4
  Item 5


Item 1
Item 2
Item 3
Item 4
Item 5




Плюсы


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


Минусы


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


Ответ 2

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


Ответ 3

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

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

scroll down



Ответ 4

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;
}

  

    JOIN
  


  Привет!