smooth scroll to DIV after click on Submitt

Question

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.

Answer 1

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

I updated your fiddle

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

• Anton Fedor: Hi Keval, thank you your example. I create similar file like you, then I changed <a id="myButton">button</a> <div class="div"> from your code to <form action="#myDiv" method="post"> <input type="text" name="city" placeholder="Enter city name"> <input type="submit" name="SubmitButton" id="SubmitButton"> </form> Then I changed javascript like this$("#SubmitButton").submit(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); I think the problem can be with form. Can you please let me know your opinion? Thank you

Answer 2

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.

Answer 3

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

Answer 4

try this

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

• Anton Fedor: Thank you for your script. I tried it, but no success, it is still scrolling without smooth effect. Should I change section id="result" to div id="result" ? <section id="result" class="container content-section text-center">

Answer 5

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