Adding Smooth Scrolling in Express

Ryan371
Tourist
7 0 1

I am using the express theme (not currently published in my store) and I would like to add a feature that smooth scrolls down from a banner section button to a featured collections section if possible. Thanks and any help is appreciated.

Replies 5 (5)

twinkleppc
Explorer
38 3 9

This would need some editing in the codes. It is hard to tell without looking into the code files. 

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
Ryan371
Tourist
7 0 1

Do you have an idea of what kind of code would be needed or where it would go? I can attach screenshots of the sections of code if I need to. I don't know a ton about coding but I know I can figure out probably where to put it if I can get the code that does the smooth scrolling.

twinkleppc
Explorer
38 3 9

Something similar to the below code: 

 

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

 

 

With some addition to the stylesheet or CSS. 

Ravi Thakor
Digital Marketing Specialist | twinkleppc.co
email: ravi@twinkleppc.co
Ryan371
Tourist
7 0 1

I figured it out. Basically had to create an anchor link and then add the custom css to allow the jump to smooth scroll instead. Thanks for the help!

LitExtension
Shopify Partner
4860 1001 1133

You can refer https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
Hope it clear to you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify