单击Submitt

Question

我想顺利滚动到名为＆＃34;结果＆＃34;点击“提交”按钮后。但只有我得到的结果才是正常滚动，而不是平滑滚动。

这是一段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>

以下是结果部分代码：

<section id="result" class="container content-section text-center">
    <div class="col-md-8 col-md-offset-2">
      <p class="intro-text">Text.</p>
      <?php include 'q.php'; ?>
    </div>
</section>

JavaScript中的以下内容：

$("#SubmitButton").submit( function() {
    $('html, body').animate({
         scrollTop: $("#result").offset().top
    }, 2000);
    return false;
});

点击“提交”按钮后，请帮助您了解如何获得平滑的滚动效果？ 我在那里使用Bootstrap框架。 非常感谢。

Answer 1

请参阅此示例http://jsfiddle.net/kevalbhatt18/8tLdq/2129/

我更新了你的小提琴

的

的

$("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

的

Answer 2

您可以使用Smooth Scrool插件：https://github.com/kswedberg/jquery-smooth-scroll

Answer 3

试试这个

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

Answer 4

Chris Coyier永远不会让我失望。这是他的解决方案。同样，我不能强调这不是我的解决方案，它属于一个传奇。点击上面的名字查看原点。

// 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' 
});

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