Как плавно прокручивать до div в Javascript

Question

Я делаю базовый веб-сайт с 1 страницей, где у меня есть несколько разных цветных div, которые имеют разные темы. У меня есть ссылки в разделе навигации этой веб-страницы, в которой я хочу, чтобы ссылки на SMOOTHLY прокручивались до уважаемого div. Я знаю, как это сделать в html, просто используя ссылку и помещая href в качестве имени div, но это мгновенное изменение и добавляет имя div в url. Как я могу сделать это плавно, не добавляя имя div в URL? Я ищу сделать аналогично тому, как работает навигационная панель на http://www.knowroaming.com. Спасибо заранее за любую помощь!

P.S. У меня есть действительно базовые знания Javascript, но я читал, что это действие было невозможно с чистым CSS, поэтому, пожалуйста, объясните, если это возможно, код. Я также слышал, что это можно сделать более легко с помощью JQuery, так что было бы здорово также знать. Еще раз спасибо!

Answer 1

Используйте этот код,

$('html, body').animate({scrollTop: $("#div-id").offset().top}, 2000); 

Answer 2

В следующем примере на JQuery

$("button").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".second").offset().top}, 
     'slow'); 
}); 

Вот Jsfiddle

Следующий пример на чистом JavaScript.

HTML Часть:

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div> 
<div class="second" id="second">Hi</div> 

CSS Часть:

.first { 
    width: 100%; 
    height: 1000px; 
    background: #ccc; 
} 

.second { 
    width: 100%; 
    height: 1000px; 
    background: #999; 
} 

JS Часть:

window.smoothScroll = function(target) { 
    var scrollContainer = target; 
    do { //find scroll container 
     scrollContainer = scrollContainer.parentNode; 
     if (!scrollContainer) return; 
     scrollContainer.scrollTop += 1; 
    } while (scrollContainer.scrollTop == 0); 

    var targetY = 0; 
    do { //find the top of target relatively to the container 
     if (target == scrollContainer) break; 
     targetY += target.offsetTop; 
    } while (target = target.offsetParent); 

    scroll = function(c, a, b, i) { 
     i++; if (i > 30) return; 
     c.scrollTop = a + (b - a)/30 * i; 
     setTimeout(function(){ scroll(c, a, b, i); }, 20); 
    } 
    // start scrolling 
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0); 
}