Question

首先，我对编码很新，特别是JavaScript。我目前正在制作一个网站，其中包含两个表单，一个位于页面顶部，另一个位于底部。

当我提交顶层表格时，我想要发生两件事：

顶部表单的输入值被转移到底部表单的输入中（我已经弄明白了）
从顶部窗体到底部窗体的平滑滚动（我需要帮助搞清楚）

我尝试过使用.scrollTop和我在互联网和随机论坛上找到的其他解决方案，但似乎没有任何效果。欢迎任何建议。我宁愿保持这个网站很轻，也不想添加任何jQuery插件或任何类似的东西。

使用此代码：

JS：

$(document).ready(function() {
    $('#top-form').submit(function(e) {
        e.preventDefault();
        var email = $('#top-email').val();
        $('#bot-email').val(email);
    });
});

HTML：

<html>
<head>
    <link href="style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="transferEmail.js"></script>
</head>
<body>
    <div>
        <form id="top-form">
            <input type="text" id="top-email">
            <button type="submit">Submit</button>
        </form>
    </div>
    <div class="spacer">
    </div>
    <div>
        <form>
            <input id="bot-email">
            <button>Submit</button>
        </form>
    </div>
</body>
</html>

CSS：

* {
    box-sizing: border-box;
    text-align: center;
}

html {
    margin: 0;
}

div {
    background: blue;
    padding: 5%;
}

.spacer {
    height: 1500px;
    background: green;
}

input {
    width: 75%;
}

Answer 1

$(document).ready(function() {
 $('#top-form').submit(function(e) {
    e.preventDefault();
    var email = $('#top-email').val();
    $('#bot-email').val(email);
    $('html, body').animate({scrollTop: $("#bot-email").offset().top}, 2000);
 });
});

你可以试试这个。

JS - 平滑向下滚动到特定元素

1 个答案: