This question has already been answered:

enter image description here There is a navbar, it is necessary that when you click on a link, he smoothly tossed to the desired section.

How to do this without JQ? I do not want to connect the whole library for the sake of this function.

Reported as a duplicate by members Crantisz , Air , ߊߚ߀ߘ , Alex Chermenin , mymedia on Dec 16 '17 at 7:02 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • 2
    Normal anchor will not work? - DogeDev
  • one
    Well, what did you do? what exactly fails ...? here is an example of a smooth transition. stackoverflow.com/questions/722375/… - Air
  • No, it won't work, you need a smooth scroll - uzi_no_uzi

2 answers 2

Here is an example of my ancient code of smooth scrolling up, I think it will not be difficult to alter under your conditions.

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

     // собираСм всС якоря; устанавливаСм врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ количСство ΠΊΠ°Π΄Ρ€ΠΎΠ² 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>