CODEWITHSUNDEEP
jquery
Oponjous
Oponjous

Reputation: 33

How to return to the top of the page after submitting form without refreshing the page

I have a form with multiple input fields, such that before I get to the submit button I would have scrolled to the bottom of the page. I use jquery to submit the form without refreshing the page. When the form submits, the submit button area, i.e the bottom of the form is still being displayed. How can I adjust my code so that once the form is submitted, it returns to the top of the page without refreshing the page? My code is shown below.

Jquery

$("#sub").click( function() {
var content =   tinyMCE.activeEditor.getContent();
$('textarea[name=texteditor]').val(content);
$.post( $("#myform2").attr("action"), $("#myform2").serialize(), function(info){ $("#result").html(info); } );
clearInput();
});

$("#myform2").submit( function() {
    return false;
});

function clearInput() {

$("#myform2")[0].reset(); 
}

Upvotes: 0

Views: 2069

Answers (3)

user6061856
user6061856

Reputation:

I'll try and help! :D

HTML here, make sure to add an ID to the body so we can go to the top!

<body id="top">
    <!-- content... -->
</body>

Next, the javascript!

// This will take the user to the top of the page.
// I haven't tested this, so it may or may not work, but you get the idea.

$('#form').submit(function() {
    window.location = window.location + "#top";
});

Upvotes: 0

jonathan.ihm
jonathan.ihm

Reputation: 108

Use

<a href="#">link</a>

to anchor back to the top.

Edit: For JS, see this page:

How to scroll to top of page with JavaScript/jQuery?

Upvotes: 0

Chris
Chris

Reputation: 4728

You can use this code to scroll smoothly to the top of the page

$("html, body").animate({ scrollTop: 0 }, "slow");

Upvotes: 2

Related Questions