Last updated on January 10th, 2023 at 10:54 am
There are requirements for the web developers to scroll the webpage to the top once a registration form or a form of any kind is being submitted by the user.. It all depends on the design of the webpage. But normally this is applicable when the form is huge and bringing in the best user experience while submitting a form
This can be solved easily with the help of Jquery.
Table of Contents
Use case : Let us assume that we have a web page longer than normal and would like user to have an option to go to the top of the page and also to the bottom of the page with single click. If that is what you are looking for this script will suit the purpose.
The HTML
I have created a dummy page that is long enough for a scroll
<input class="orangebutton" type="button" id="submit_to" value="Scroll Down" />
<div style="display:none" id="container"><font color='red'>You click on scroll up, Hello From Mistonline.in</font></div>
<h1>The div element</h1>
<div class="testdiv">
<h2>This is some text 1</h2>
<p>This is some text 2</p>
</div>
<div class="testdiv">
<h2>This is some text 3</h2>
<p>This is some text 4<>/p>
</div>
<div class="testdiv">
<h2>This is some text 5</h2>
<p>This is some text 6</p>
</div>
<div class="testdiv">
<h2>This is some text 7</h2>
<p>This is some text 8</p>
</div>
<div class="testdiv">
<h2>This is some text 9</h2>
<p>This is some text 10</p>
</div>
<div class="testdiv">
<h2>This is some text 11</h2>
<p>This is some text 12</p>
</div>
<input class="orangebutton" type="button" id="submit" value="Scroll Up" />
As you can see there are two buttons in the beginning and end of the page. There is also a div with id container which is hidden by default. This is purposefully kept in case if you would like to display something to the user you can show the div when the user click on button “Scroll Up”
Now that we have the basic HTML form ready the next step is to play with some jQuery. Add it inside the body tag
Scroll Top Botton
This is a simple jquery script which listens on those two button clicks.
//scroll up
$('body,html').animate({scrollTop:$(window).height()},800);
//scroll down
$('body,html').animate({scrollTop:0},800);
We have body,html selector defined because they are browser specific
FirefoxandIEuse html selectorSafariandChromeuse the body selector- Using $(window).height() to figure out the height of the window
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$("#container").css("display", "block");
$('#container').fadeIn("slow");
console.log("I am in slow fade")
} else {
$('#container').fadeOut();
}
});
$('#submit_to').click(function() {
$('body,html').animate({scrollTop:$(window).height()},800);
});
$('#submit').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
We are all set once the visitor click on the buttons it moves up and down accordingly.
Full Code
Here is the complete script (with div style included)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$("#container").css("display", "block");
$('#container').fadeIn("slow");
console.log("I am in slow fade")
} else {
$('#container').fadeOut();
}
});
$('#submit_to').click(function() {
$('body,html').animate({scrollTop:$(window).height()},800);
});
$('#submit').click(function() {
$('body,html').animate({scrollTop:0},800);
console.log("I am in submit")
});
});
</script>
<style>
.testdiv {
height: 200px;
border: 5px outset aqua;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<input class="orangebutton" type="button" id="submit_to" value="Scroll Down Smooth" />
<div style="display:none" id="container"><font color='red'>You click on scroll up, Hello From Mistonline.in</font></div>
<h1>The div element</h1>
<div class="testdiv">
<h2>This is some text 1</h2>
<p>This is some text 2</p>
</div>
<div class="testdiv">
<h2>This is some text 3</h2>
<p>This is some text 4</p>
</div>
<div class="testdiv">
<h2>This is some text 5</h2>
<p>This is some text 6</p>
</div>
<div class="testdiv">
<h2>This is some text 7</h2>
<p>This is some text 8</p>
</div>
<div class="testdiv">
<h2>This is some text 9</h2>
<p>This is some text 10</p>
</div>
<div class="testdiv">
<h2>This is some text 11</h2>
<p>This is some text 12</p>
</div>
<input class="orangebutton" type="button" id="submit" value="Scroll Up" />
Display Hidden Div
Final notes, you will also notice that a div will be shown once you click on the button named “Scroll Up”, this is just a bonus feature if you want to display something when user scrolls up.
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$("#container").css("display", "block");
$('#container').fadeIn("slow");
console.log("I am in slow fade")
} else {
$('#container').fadeOut();
}
});
Modify the code above according to your requirement.
admin