День добрый, подскажите, пожалуйста.
Хочу сделать плавный скроллинг страницы по менюшке на чистом js. Мучаюсь второй день, не могу разобраться, что не так. Есть такой вариант, который естественно неправильный. Сторого не судите.
<style>
html, body {
height:100%;
}
</style>
<body>
<div class="nav1" style= 'position:fixed;'>
<ul id="nav" onclick="event.preventDefault()">
<li><a href ="#aboutus" onclick="scrollMenu('aboutus')"> about us </a></li>
<li><a href="#products" onclick="scrollMenu('products')">products</a></li>
</ul>
</div>
<div id="aboutus" style="height: 100%;">First</div>
<div id='products' style="height: 100%;">Second</div>
<script>
function scrollMenu(Id) {
element = document.getElementById(Id).scrollIntoView();
function scrollToElement(scrollDuration) {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollStep = window.scrollTo(0, element) / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( scrollTop != element.getBoundingClientRect()) {
window.scrollBy( 0, scrollStep );
} else clearInterval(scrollInterval);
},15);
}
scrollToElement(1000);
}
</script>
</body>