Have you ever wanted to create a button on your page where, when clicked, it smoothly scrolls to a specific section? This repository can help you, even if you don't know anything about JavaScript.
Click here to view the example preview.
Insert the code from smoothScroll.js into a <script> tag at the end of the <body>.
Notice:
{ trigger: "btn1", target: "section1", offset: 0, speed: 1000 },
{ trigger: "btn2", target: "section2", offset: 0, speed: 1000 },
{ trigger: "btn3", target: "section3", offset: 0, speed: 1000 }
// Add as many as you want
Focus only on this part of the code. Notice that the trigger identifier is set to target a class (in this case, btn1) of a button. I didn't use an ID here because this way, you can add multiple buttons with the same function.
Note
The trigger must necessarily be a class, and the target must be an ID.
It will smoothly scroll to the section identified as section1 when clicked. Offset is the margin between the section and the top of the browser (defined in pixels), and speed is the transition speed between one and the other. The level of smoothness will depend on the speed and the distance from the trigger to the target.
I won’t go into HTML details, as the focus of this repository is for those who don't have knowledge of JavaScript.
I hope I’ve been helpful!