css 点击提交后平滑滚动至DIV

v09wglhw 于 2023-03-05 发布在其他

关注(0)|答案(5)|浏览(154)

我想在点击提交按钮后平滑滚动到名为“结果”的部分。但我得到的结果只是正常滚动，而不是平滑滚动。
下面是一段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框架。非常感谢。

css

来源：https://stackoverflow.com/questions/34262921/smooth-scroll-to-div-after-click-on-submitt

5条答案

按热度按时间

p5fdfcr11#

请参见此示例http://jsfiddle.net/kevalbhatt18/8tLdq/2129/
我更新了你的小提琴
``
`

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

`
``

赞(0）回复(0）举报 2023-03-05

ifsvaxew2#

您可以使用平滑滚动插件：https://github.com/kswedberg/jquery-smooth-scroll

赞(0）回复(0）举报 2023-03-05

yws3nbqq3#

试试这个

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

赞(0）回复(0）举报 2023-03-05

w1e3prcc4#

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

在我看来，这是一个更好的解决办法。

赞(0）回复(0）举报 2023-03-05

q7solyqu5#

我想我已经找到了最简单的方法，这里的问题是，提交页面刷新后，由于刷新是在浏览器端，所以不建议干扰浏览器的动作。
根据经验，我找到了元素的位置，如div、table等。在我的例子中，1000px是合适的，我使用了这个，工作得很好：

if(isset($_POST['input_name']))
{       
    // your action codes here ....
            
echo '
      <script>
      window.scrollTo(0, 1000);
      </script>';                           
}

赞(0）回复(0）举报 2023-03-05

我来回答

css 点击提交后平滑滚动至DIV

5条答案

相关问题

热门标签

最新问答