Smooth Scroll Stimulus

Orginally published at Medium on Feb 28th 2020.

Elegantly slide to a section of a page

1. Install the package
2. Add Stimulus Scroll-To library
3. Add sidebar
4. Add content

Learn how to set up a smooth scrolling with Ruby on Rails and Stimulus Components. This is a simple and clean way to enable users to slide to a different section of a page.

---

Before You Start

Make sure you have Stimulus installed. Check the package.json file or run yarn why stimulus. If Stimulus is not yet installed, follow the documentation.

---

1. Install the package

Add Stimulus ScrollTo to your project

yarn add stimulus-scroll-to

---

2. Add Stimulus Scroll-To library

import { Application } from 'stimulus'
import { ScrollTo } from 'stimulus-scroll-to'

const application = Application.start()
application.register("scroll-to", ScrollTo)

---

3. Add sidebar

<div class="flex">
  <div class="w-1/5">
    <small class="pb-3 text-sm italic">click a link in the sidebar 👇</small>
    <ul class="sticky flex flex-col w-full h-auto p-2 space-y-4 bg-white border-4 border-gray-500 rounded-lg top-16">
      <li><%= link_to "Introduction", "#introduction", data: {controller: "scroll-to"}  %></li>
      <li><%= link_to "Technical Overview", "#technical_overview", data: {controller: "scroll-to"}  %></li>
      <li><%= link_to "Philosophy & Design", "#philosophy_design", data: {controller: "scroll-to"}  %></li>
      <li><%= link_to "Framework Structure", "#framework_structure", data: {controller: "scroll-to"}  %></li>
      <li><%= link_to "Trademarks", "#trademarks", data: {controller: "scroll-to"}  %></li>
    </ul>
  </div>

  <div class="w-4/5"></div>
</div>

• data-controller=”scroll-to” scopes the imported controller to every individual link_to.
• The hashtag(#) in the link_to will look on the same page for a matching id. From #introduction to id=”introduction”

---

4. Add content

<div class="w-4/5">
  <article>
    <ul>
      <li>
        <p id="introduction">Introduction</p>
        <p>PARAGRAPH HERE</p>
      </li>
      <li>
        <p id="techincal_overview">Techincal Overview</p>
        <p>PARAGRAPH HERE</p>
      </li>
      ...
    </ul>
  </article>
</div>

Note that the code snippet above is a simplified, without Tailwind CSS classes, in order to keep the view clean

That’s it, Smooth Scrolling is now functional!

Thanks for reading!

Comments

[DavidMroz]

it is good in using , keep posting such valuable article which inspire us to do work more . sihr of separation