scroll-to-elements

scroll-to-elements: Explore ease of scrolling to both the top and bottom of the page!

How to Use?

1. Connect the Script File:

Option 1: Download from GitHub dist/app.js

<script src="app.js"></script>

Option 2: Use CDN

<script src="https://cdn.jsdelivr.net/gh/ArtemProshkovskiy/scroll-to-elements/dist/app.js"></script>

Option 3: Use npm

Install via npm:

npm i scroll-to-elements

Import and use in your JavaScript file:

import scrollTo from "scroll-to-elements/main";
scrollTo();

2. Create a Scroll Goal ID:

Assign a unique identifier (id) to the HTML element you want to scroll to:

<section id="scrollGoal">
    <!-- Your content goes here -->
</section>

3. Create a Link with href Attribute:

Generate an anchor (<a>) element with the href attribute pointing to the defined id:

<a href="#scrollGoal">Scroll to Goal</a>

4. Create Additional Scroll Goal IDs:

You can create multiple scroll goal IDs as needed:

<section id="scrollGoal1">
    <!-- Content for goal 1 -->
</section>

<section id="scrollGoal2">
    <!-- Content for goal 2 -->
</section>

<!-- Add more sections as necessary -->

5. Create Additional Links with href Attribute:

Generate anchor (<a>) elements with href attributes pointing to the respective IDs + you can create multiple anchors with same id:

<a href="#scrollGoal1">Scroll to Goal 1</a>

<a class="sameid" href="#scrollGoal1">Scroll to Goal 1(same id)</a>

<a href="#scrollGoal2">Scroll to Goal 2</a>
<!-- Add more links as necessary -->

Feel free to customize IDs, link texts, and content according to your project requirements.

Check out the demo page to see how the library works.