Skip to content

yasinkarax/scroll-to-tap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Buy Me A Coffee

About the Scroll to Tap Button

This button move you to top of the page.

It's can be usefull in long web pages.

recording

How to use?

  1. Add the html code to anywhere inside body tags in your html file.
<div id="up" onclick="pageUp()">
    <div class="up-bg">
        <img src="images/jet.png" alt="tap to up">
    </div>
    <div id="up-text">Page Up</div>
</div>

  1. Add the 'up.css' file to your project and describe the file path.
  2. Add the js file to your project and describe the file path in end of the body tag.

Set the Button's Visibility Time

To set when the button is visible Change the scrollSize variable's value in the pageUp.js file. If you set a higher value the button will be visible more lately.

Clone the repository

https://github.com/yasinkarax/scroll-to-tap-button.git

Icon or image

You can use an icon or image for the button.

If you want to use icon, i recommend Font Awesome. To add Font Awesome to your project, add Font Awesome Kit to your code, then add the html icon code inside the up--bg class div.

https://fontawesome.com/docs/web/setup/use-kit

Or you can add image inside div with up--bg class like me.

Smooth Scrolling

The button have smooth scrolling behaviour by default. You can disabled it by delete the scroll-behavior: smooth; code in main css file.