Не работает плавный скролл Jquery. В чем ошибка?

Question

[Михаил Захаров]

Есть сайт. Для вашего удобства залил сюда - https://new.smart-resto.ru/
В чем суть - вверху и внизу страницы есть меню. В теории, при клике на это меню, сайт плавно скроллится на блок с тем же айдишником, который указан в ссылке.
Можно заметить, что есть ссылки вида - https://new.smart-resto.ru/#second/4
Это значит, что переходе на вторую секцию откроется 4 слайд.
Это парсится через href.split("/").
Но это второстепенно, так как нужно реализовать скролл на секцию, а вот он как раз-таки не работает.
Для желающих помочь, специально сделал так, чтобы при нажатии на ссылку, сайт плавно скроллился на топ и выводил алерт с нашим всеми любимым словом.
Но вот что странно, обработка клика происходит, так как алерт выводится, но вот скролла нет.
Код чистый, правильный, 100% рабочий. Ошибок нет. Но вот не скроллит, ска, и все. Целый день с этим сексился. Ничего не осталось как спросить у коллег - кто-нибудь сталкивался с этим? Есть решение? Что неправильно?
З.Ы. Не обращайте внимания, что все скрипты находятся внизу страницы. Это сделано для 100 из 100 в Google PageSpeed. Никак не влияет на работоспособность.
Хочу напомнить, что js можно писать прямо в хромдевтулс.
Для вашего удобства - ссылка, на которой производится отладка - первая в нижнем меню, с классом .noreturn.
Заранее спасибо за помощь.

Answer 1

[dummyman]

Вот бог его знает что там у вас не так, уже нет времени разбираться. Я вам оставлю мою версию демо-странички для плавного скролинга, там все в одном jade-файле

doctype html
html
    head
        style.
            html, body {background: white; background: #2c2c2c; }
            body, div { margin: 0; padding: 0;}
            html, body { width: 100%; height: 100% }
            body { padding-top: 50px; }
            nav { position: fixed; top: 0; height: 50px; width: 100%; background:#444444; border: 1px solid #313131; z-index: 1000; }
            nav ul { text-align: center; }
            nav ul li { display: inline-block; }
            nav ul li a { color: #D07C40; display: inline-block; text-decoration:none; margin: 0 7px; font-family: Diskoteque;  text-shadow: 0 0 0.5em #241600, 0 0 0.1em #000000; }
            nav ul li a:hover { color: #94D040;}
            nav ul li a:visited { color: #EFC75E; }
            nav ul li a:focus { color: #94D040; }
            nav ul li a:target { color: #94D040; }
            nav ul li a:active { color: #94D040; }
            .anchor { display: block; position:absolute; margin-top: -60px; }
            .photo { object-fit: contain; margin: 0 auto; position: relative; padding: 10px; margin: 15px 10px; background: white; box-shadow: 2px 2px 5px black;}
            .photo.hor { width: 640px; height: 480px; }
            .photo.vert { width: 480px; height: 640px; }
            .photo .num { position: absolute; z-index: 100; color: red; font-family: Tiza; width:2.5em; height: 2.1em; text-align: center; margin: .5em 0 0 .2em; }
            .photo img { width: 100%; height: 100%; display: block; margin: 0 auto; position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
            .photo .filename {position: absolute; z-index: 100; width:100%; height: 1.5em; margin-top: -2.1em; padding: .2em; }
            .photo .filename span { display:inline-block; color: #96969c; text-shadow: 0 0 0.5em #101c5d, 0 0 0.1em #000000; font-family: ZOMBIFIED; padding: .4em .2em 0 .2em; }
        script.
            function scrollTop(to, duration) {
                if (document.body.scrollTop == to) return;
                var diff = to - document.body.scrollTop;
                var scrollStep = Math.PI / (duration / 10);
                var count = 0, currPos;
                start = document.body.scrollTop;
                scrollInterval = setInterval(function(){
                    if (document.body.scrollTop != to) {
                        count = count + 1;
                        currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
                        document.body.scrollTop = currPos;
                    }
                    else { clearInterval(scrollInterval); }
                },10);
            }

            function scrollTo(e)
            {
                e.preventDefault();
                e.stopPropagation();
                //var dest = document.getElementById(elID);
                var destName = this.hash.substr(1);
                if(destName.length> 0){
                    var dest = document.querySelector('a[name='+destName+']');
                    var destRect = dest.getBoundingClientRect();
                    var content  = document.querySelector('.content');
                    var contentRect = content.getBoundingClientRect();
                    var bodyRect = document.body.getBoundingClientRect();
                    var contentHeight = contentRect.height + 120;
                    var bodyHeight = bodyRect.height;
                    var offsetTop = destRect.top - bodyRect.top;
                    if(offsetTop > contentHeight - bodyHeight)
                        offsetTop = contentHeight - bodyHeight;
                    scrollTop(offsetTop, 200);
                } else {
                    scrollTop(0, 200);
                }
            }
    body
        nav: ul
            each photo, idx in photoList
                li.item: a.nav-link(href="#"+(idx > 0 ? photo.name : ''))= idx+1
        script.
            Array.from(document.querySelectorAll('a.nav-link'))
            	.forEach((a)=>a.addEventListener('click', scrollTo));
        .content
            each photo, idx in photoList
                div(style='clear:both;')
                a.anchor(name=photo.name)
                div(class=photo.vertical?'photo vert': 'photo hor')
                    .num
                        span= idx+1
                    img(src='file://'+photo.path)
                    .filename
                        span= photo.name