javascript - 滚动到动画

Question

我创建了简单的链接动画来滚动，这个链接可能是在同一页面的某个部分滚动的链接，也可能是指向外部 URL 的链接，如果你点击按钮(“第 4 部分”)你会发现一个奇怪的问题运动这是第一个问题。

---

第二个问题:如果用户多次点击按钮然后点击另一个按钮，滚动将不会工作，直到上一次点击完成:
我的代码如下:

 $(".links a").click(function () {
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 1400)
        })

.links {
    width:600px;
    position:fixed;
    top:0;
    padding:20px;
}
.links a {
    display:inline-block;
    padding:10px 20px;
    border:1px solid #0094ff;
}
.section {
    width:400px;
    height:200px;
    margin:300px auto 600px;
    background-color:#0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>

注意:请不要推荐我使用任何我想进一步了解 Javascript 的插件

Answer 1

您可以使用 e.preventDefault()。

通过更改您的函数将事件参数传递到点击事件:

$(".links a").click(function () {

到

$(".links a").click(function (e) {

现在您可以编辑点击的默认事件。您可以使用 preventDefault https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault 执行此操作.

其次，您可以使用 stop()修复动画。

 $(".links a").click(function (e) {
  if ($(this).attr("href").charAt(0) == "#") {
    e.preventDefault();
    $("html, body").stop().animate({
      scrollTop: $($(this).attr("href")).offset().top
    }, 1400)
  }
});

.links{
                width:600px;
                position:fixed;
                top:0;
                padding:20px;
            }
            .links a{
                display:inline-block;
                padding:10px 20px;
                border:1px solid #0094ff;
            }
            .section{
                width:400px;
                height:200px;
                margin:300px auto 600px;
                background-color:#0094ff;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
        <a href="http://google.com">External Link</a>
    </div>
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>