CODEWITHSUNDEEP
jqueryhtmlforms
Jordy Senssen
Jordy Senssen

Reputation: 171

Scroll down after form submit

I have a form (searchbar) with a submit button. After that I want the page to smoothly scroll down to the next section. I cant seem to find a good working snippet though.

I have tried to do it with Jquery .animate, but it won't work cause the page refreshes. I have tried to put the section to scroll to in the form action too, but that is instant, not smooth.

Some solutions?

$(".submit").click(function() {
    $('html, body').animate({
        scrollTop: $("#twee").offset().top
    }, 2000);
});
 	<form action="index.php#twee" method="post">
        <div class="searchbar">
    	<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Zoek een game">
        </div>
        <div class="submitButton">
    	<input name="submit" type="submit" value="submit" class="submit">
        </div>
		</form>

Upvotes: 0

Views: 3239

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you can use this code in index.php page

$(document).ready(function(){
    var href = window.location.href; 
    var splitit = (href.split('#'))[1]; //split url to get twee name
    if(splitit !== "" || splitit !== "undefined"){
        $('html, body').animate({
            scrollTop: $('#'+splitit).offset().top
        }, 2000);
    }
});

and remove animate from your form submit event

Upvotes: 1

Related Questions