Скролл при нажатии на ссылку?

263

15 декабря 2017, 01:09

Есть навбар, надо что бы при нажатии на ссылку он плавно перекидывал на нужную секцию.

Как сделать это без помощи JQ? Не хочу подключать целую библиотеку ради этой функции.

Answer 1

Вот пример моего древнего кода плавного скролла наверх, переделать под ваши условия думаю будет не сложно.

var toTopButton = document.getElementById('scroll-to-top');
if (toTopButton) {
    Math.easeInOutQuad = function (t, b, c, d) {
        t /= d/2;
        if (t < 1) {
            return c/2*t*t + b
        }
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
    };
    var requestAnimFrame = (function(){
        return  window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
    })();
    function scrollToTop() {
        function move(amount) {
            document.documentElement.scrollTop = amount;
            document.body.parentNode.scrollTop = amount;
            document.body.scrollTop = amount;
        }
        function position() {
            return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;
        }
        var start = position(),
            currentTime = 0,
            increment = 20;
        var animateScroll = function() {
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, -start, 300);
            move(val);
            if (currentTime < 300) {
                requestAnimFrame(animateScroll);
            } 
        };
        animateScroll();
    }
    toTopButton.addEventListener("click", function(e){
        e.preventDefault();
        scrollToTop();
    });
}

Answer 2

// собираем все якоря; устанавливаем время анимации и количество кадров 
const anchors = [].slice.call(document.querySelectorAll('a[href*="#"]')), 
      animationTime = 300, 
      framesCount = 20; 
 
anchors.forEach(function(item) { 
  // каждому якорю присваиваем обработчик события 
  item.addEventListener('click', function(e) { 
    // убираем стандартное поведение 
    e.preventDefault(); 
     
    // для каждого якоря берем соответствующий ему элемент и определяем его координату Y 
    let coordY = document.querySelector(item.getAttribute('href')).getBoundingClientRect().top; 
     
    // запускаем интервал, в котором 
    let scroller = setInterval(function() { 
      // считаем на сколько скроллить за 1 такт 
      let scrollBy = coordY / framesCount; 
       
      // если к-во пикселей для скролла за 1 такт больше расстояния до элемента 
      // и дно страницы не достигнуто 
      if(scrollBy > window.pageYOffset - coordY && window.innerHeight + window.pageYOffset < document.body.offsetHeight) { 
        // то скроллим на к-во пикселей, которое соответствует одному такту 
        window.scrollBy(0, scrollBy); 
      } else { 
        // иначе добираемся до элемента и выходим из интервала 
        window.scrollTo(0, coordY); 
        clearInterval(scroller); 
      } 
    // время интервала равняется частному от времени анимации и к-ва кадров 
    }, animationTime / framesCount); 
  }); 
});

body{ 
  font-family:sans-serif; 
  margin:0; 
  padding:0; 
} 
a{ 
  text-decoration:none; 
  color:#fff; 
} 
div{ 
  display:flex; 
  align-items:center; 
} 
.navbar{ 
  height:60px; 
  background:#000; 
  color:#fff; 
 
} 
ul{ 
  display:flex; 
  list-style:none; 
} 
li{ 
  margin-right:2rem; 
} 
#about_us{ 
  background:red; 
} 
#contacts{ 
  background:blue; 
} 
#services{ 
  background:green; 
} 
#about_us, #contacts, #services{ 
  height:300px; 
  text-align:center; 
}

<div class="navbar" id="navbar"> 
  <ul> 
    <li><a href="#navbar">Home</a></li> 
    <li><a href="#about_us">About us</a></li> 
    <li><a href="#contacts">Contacts</a></li> 
    <li><a href="#services">Services</a></li> 
  </ul> 
</div> 
<div id="about_us"> 
  About us 
</div> 
<div id="contacts"> 
  Contacts 
</div> 
<div id="services"> 
  Services 
</div>