I would like to smooth scroll to part called "result" after click on Submit button. But only result I get is just normal scroll, not smooth scroll.

Here is piece of HTML code:

<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>

And here is the result section code:

<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>

A set following in JavaScript:

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

Can you please help how to get the smooth scrolling effect after click on Submit button? I use Bootstrap framework there. Many thanks.

I would like to smooth scroll to part called "result" after click on Submit button. But only result I get is just normal scroll, not smooth scroll.

Here is piece of HTML code:

<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>

And here is the result section code:

<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>

A set following in JavaScript:

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

Can you please help how to get the smooth scrolling effect after click on Submit button? I use Bootstrap framework there. Many thanks.

• javascript
• jquery
• html
• css
• smooth-scrolling

5 Answers 5

see this example http://jsfiddle/kevalbhatt18/8tLdq/2129/

I updated your fiddle

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

Chris Coyier never lets me down. Here is his solution. Again, I can't stress enough that this isn't my solution, it belongs to a legend. Check out the origin by clicking his name above.

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

In my opinion, this is a better solution.

You can use Smooth Scrool Plugin: https://github./kswedberg/jquery-smooth-scroll

try this

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

I think I have discovered the simplest method. The problem here is, after submission page refreshes. As the refresh is browser side, it is not suggested to interfere browser action.

By emprical, I found the position of my element as div, table, etc.. In my case 1000px was fine and I used this and worked fine:

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