我必须单击两次以平滑滚动才能在我的网站上执行

Question

I'm trying to get smooth scroll to execute on my site, and at first I was having the issue of it not working at all, but now it only works if you click twice on an <a> tag in the sidebar menu. 我正在尝试使滚动平滑地在我的网站上执行，起初我遇到了根本不起作用的问题，但是现在只有在侧边栏菜单中的<a>标记上单击两次时，它才起作用。 The JS I'm using is from https://perishablepress.com/vanilla-javascript-scroll-anchor/ . 我正在使用的JS来自https://perishablepress.com/vanilla-javascript-scroll-anchor/ 。

HTML: HTML：

<body>
<div class="wrapper" id="home">

        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header text-center">
                <h3>DS</h3>
            </div>
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#home" class="scroll">Home</a>
                </li>
                <li>
                    <a href="#about" class="scroll">About</a>
                </li>
                <li>
                    <a href="#experience" class="scroll">Experience</a>
                </li>
                <li>
                    <a href="#skills" class="scroll">Skills</a>
                </li>
                <li>
                    <a href="#work" class="scroll">Work</a>
                </li>
                <li>
                    <a href="#contact" class="scroll">Contact</a>
                </li>
            </ul>

            <ul class="list-unstyled CTAs">
                <li>
                    <a href="#" class="download">Download Resume PDF</a>
                </li>
            </ul>
        </nav>

<!--sections -->
    <div class="blank-section" id="about"></div>
      <div class="regular-padding">
        <h3 id="about-h3"><mark>About Me</mark></h3>

      </div>
    <div class="blank-section" id="skills"></div>
        <div class="regular-padding">
          <h3 id="skills-h3"><mark>Skills</mark></h3>

        </div>
    <div class="blank-section" id="work"></div>
        <div class="regular-padding">
          <h3 id="work-h3"><mark>Work</mark></h3>

        </div>
    <div class="blank-section" id="contact"></div>
        <div class="regular-padding">
          <h3 id="contact-h3"><mark>Contact</mark></h3>

        </div>
  </div>
</div>

JS: JS：

// // //smooth scroll
// // // Vanilla JavaScript Scroll to Anchor
// // // @ https://perishablepress.com/vanilla-javascript-scroll-anchor/

(function() {
    scrollTo();
})();

function scrollTo() {
    const links = document.querySelectorAll('.scroll');
    links.forEach(each => (each.onclick = scrollAnchors));
}

function scrollAnchors(e, respond = null) {
    const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);
    e.preventDefault();
    var targetID = (respond) ? respond.getAttribute('href') : this.getAttribute('href');
    const targetAnchor = document.querySelector(targetID);
    if (!targetAnchor) return;
    const originalTop = distanceToTop(targetAnchor);
    window.scrollBy({ top: originalTop, left: 0, behavior: 'smooth' });
    const checkIfDone = setInterval(function() {
        const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
        if (distanceToTop(targetAnchor) === 0 || atBottom) {
            targetAnchor.tabIndex = '-1';
            targetAnchor.focus();
            window.history.pushState('', '', targetID);
            clearInterval(checkIfDone);
        }
    }, 100);
}

The anchor tags work like they're supposed to by default in HTML, but they aren't smooth scrolling at all even with e.preventDefault() . 锚标记的工作方式与HTML默认情况下一样，但是即使使用e.preventDefault() ，它们也根本无法平滑滚动。 I'm not totally sure what's requiring a doubleclick. 我不确定要双击什么。

Answer 1

You don't need to use js for this problem... Assuming that you scroll to a certain element on your page, you can use this: 您无需为此问题使用js ...假设您滚动到页面上的某个元素，则可以使用以下代码：

 html{ scroll-behavior: smooth; }

 <a href="#test">Click me</a> <p>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br>Lorem impsum <br></p> <p id="test">This is it</p>

我必须单击两次以平滑滚动才能在我的网站上执行

问题描述

1 个解决方案

解决方案1
1 2019-08-06 18:22:08

我必须单击两次以平滑滚动才能在我的网站上执行

问题描述

1 个解决方案

解决方案1 1 2019-08-06 18:22:08

解决方案1
1 2019-08-06 18:22:08