Javascript 单击Submitt后平滑滚动到DIV

我想在点击提交按钮后平滑滚动到名为“结果”的部分。但我得到的唯一结果是正常的滚动，而不是平滑的滚动

下面是一段HTML代码：

<form action="index.php#result" method="post">
    <div id="search-box">
     <?php include 'submitt.php'; ?>
        <input type="text" name="city" placeholder="Enter city name">
        <input type="submit" name="SubmitButton" id="SubmitButton">
    </div>
</form>

您能帮助我们在点击提交按钮后如何获得平滑的滚动效果吗？ 我在那里使用引导框架。

---

非常感谢。

您可以使用Smooth Scrool插件：

您可以使用Smooth Scrool插件：

参见此示例

我更新了你的小提琴

参见此示例

我更新了你的小提琴

试试这个

$("#SubmitButton").submit( function() {
    $('body').scrollTo('#result',{duration:2000});
    return false;
});

试试这个

$("#SubmitButton").submit( function() {
    $('body').scrollTo('#result',{duration:2000});
    return false;
});

从不让我失望。这是他的解决方案。再次强调，这不是我的解决方案，它属于一个传奇。通过单击上面的他的名字来查看来源

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

在我看来，这是一个更好的解决方案。

永远不会让我失望。这是他的解决方案。再次强调，这不是我的解决方案，它属于一个传奇。通过单击上面的他的名字来查看来源

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

---

在我看来，这是一个更好的解决方案。

谢谢您的脚本。我试过了，但是没有成功，它仍然在滚动，没有平滑的效果。我是否应该将section id=“result”更改为div id=“result”<代码>谢谢您的脚本。我试过了，但是没有成功，它仍然在滚动，没有平滑的效果。我是否应该将section id=“result”更改为div id=“result”<代码>嗨，凯瓦尔，谢谢你的例子。我像你一样创建了类似的文件，然后我将

按钮

从你的代码更改为

，然后我将javascript更改为

$（“#SubmitButton”）.submit（函数（）{$（'html，body'）.animate（{scrollTop:$（“#myDiv”）.offset（）.top}，2000）；）我认为问题可能出在形式上。你能告诉我你的意见吗？谢谢，谢谢。真的节省了我很多时间：）嗨，凯瓦尔，谢谢你的例子。我像你一样创建了类似的文件，然后我将
按钮
从你的代码更改为
，然后我将javascript更改为
$（“#SubmitButton”）.submit（函数（）{$（'html，body'）.animate（{scrollTop:$（“#myDiv”）.offset（）.top}，2000）；）我认为问题可能出在形式上。你能告诉我你的意见吗？谢谢，谢谢。真的节省了我很多时间：）
// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});