ShortCode: Download the scrolltop.zip copy image.css, jquery.scrollUp.js and top.png to the correct folders /css/themes, js, and img. (remember to add jquery.js as well). Then, Initilize it
$(function () {
$.scrollUp({
scrollText: '', // Text for element
});
});
Step 1: Download the scrolltop.zip --> this folder has css, js and html scrolltop demo.
Step 2: Unzip and open the web project with Visual Studio
Step 3: In the next time, if we want to create a Scroll Top icon for the web page, we need these files:
css/themes/image.css
img/top.png
js/jquery.js
js/jquery.scrollUp.js
Set up: Copy those files above to your website page (remember to copy the correct links)
All the jquery codes are very simple written by Mark GoodYear website. You can find more config and demos for the scroll up here: https://markgoodyear.com/2013/01/scrollup-jquery-plugin/
Step 4: Call this function $.scrollUp(); --> to initilize the scrollTop icon
$(function () {
$.scrollUp({
scrollText: '', // Text for element
});
});
Step 5: Try to run the demo, scroll the page down to the bottom and see the scrolltop icon will be displayed at the bottom right of the page. Click the icon, the page will be scrolled to the top.
If you can not make it, just leave the comment here! We will help you make it work.