How to Smooth scroll to sections?

[Meir_Shopify]

I have Jumpstart theme on my store

And I want to scroll from the main menu to sections down the same page..

How I do that?

[KarlOffenberger · Accepted solution]

The basic smooth scroll with anchors would work like shown below - since Jumpstart has jQuery I used that for brevity. Also, see my Codepen for a demo.

$(document).ready(function() {
  $('.smooth-scroll').on('click', function(evt) {
    evt.preventDefault();
    $('html, body').animate(
      { scrollTop: $($(this).attr('href')).offset().top},
      300
    );
  });
});

Where you put that in your theme and what elements you decide to smooth scroll is up to you.

Best wishes!

[Meir_Shopify]

thats exactly what I need, thank you!

But I have a very basic knowledge in web development

I tried to search there the sections (that I can activate the code on them) 

I mean look at the pic I uploaded

where I need to put the code there?

(I tried to search and didnt find my section list items)

[KarlOffenberger]

Well what exactly you need to change or add and where depends on what sections you want to have the smooth scroll. The main issue I see here is that your main menu is for pages / collections and I am not sure how you envision doing that "scroll to section" from the main menu.

But to begin with, your main menu code can be found in Sections / header.liquid which further includes Snippets / site-nav.liquid and Snippets / drawer-nav.liquid. Your actual section code will be found in a number of Section folder files depending on what section you're looking for. On the index (home) page for instance, the sections you add are wrapped in a <div /> element which is given a unique ID that you can also use for smooth scrolling to it.

I think a step-by-step guide wouldn't be possible without knowing exactly what and where you're trying to add these scroll to's. Even then, I must admit that it would probably not fall in to my scope of "forum advice" but me more suitable for a Shopify Expert to work together with you toward a solution you're happy with. Alternatively, you can try contacting Shopify support directly asking about free theme support which they may be able to provide - and can use my code above to quickly add smooth scroll where you need it.

Best wishes!

[Meir_Shopify]

thank you for the reply! I really appreciate that!!!

this is the store:

https://8nnolveggqxoeq7l-8257634364.shopifypreview.com

you can see on the bar I have a "features" section, I want that when I click it, it will get me down to this : http://prntscr.com/mjifn2

[Meir_Shopify]

I finally succeeded thank you so much Karl! im so excited!!

another little thing: It works when i am at the same page, but if im on an FAQ page and try to click that button, it doesnt make anything. How can I make it go to the home page and then smooth scroll(from the FAQ page)

Is it possible?

thanks again Karl You helped me a lot!! 

[KarlOffenberger]

Hi,

On the product detail page, the Features and How it works? menu items do not work because they only link to element IDs that are available on the homepage. Because they do not actually link to the homepage itself, nothing happens.

You have a few options here

1. Only on the product page would you change the URL of these linklist items (the menu) to actually point back to the homepage as well as a hash to the element ID - that way it would navigate to the homepage and scroll to the element with that ID albeit without smooth scroll as this is default browser behaviour
2. Same as above but you could abort the default scroll action in the presence of a hash in the URL and then have the script perform a smooth scroll. Personally, I think this is rather very obtrusive to the intended behaviour of browsers and while I understand the appeal of it, wouldn't recommend it
3. Have the product page contain sections with the same IDs and similar content (not to tick off Google & co) for more in detail features and how to's - more content and no need to change menu and smooth scroll works as is

Hope this helps!

[Meir_Shopify]

Hey Karl, Thank you  

[Meir_Shopify]

Hi Karl,

yes 2. is actually what I need, I tried to do:

<li>
     <a href="www.mypage.com#home-features" class="smooth-scroll">Features</a>
</li>

The original code was:

<li>
    <a href="#home-features" class="smooth-scroll">Features</a>
</li>

it didnt work how can I fix it?

[danstoj]

Hey Karl! Which file do you put the Javascript snippet into? I am using the Debut theme. Thanks for your help.

[LBo]

@danstoj Hey there! Have you been able to get it to work? 🙂

[LBo]

Hey Karl,

This code looks great. I have already set up the scroll to section by linking the div/anchor.. Just can't figure out where to insert your code for the smooth scroll.. Can you help out a rookie, please? 🙈

[shawnslee]

I'm using Debut theme and fixed it by adding one line of CSS snippet. 

Add the following snippet at the end of the file: theme.scss.liquid.

(Edit code >> Assets >> theme.scss.liquid)

html {
  scroll-behavior: smooth;
}

[LeonMarijn]

Yeah, this works like a charm, also on the Dawn theme which I'm using. However, this CSS element is not supported by Safari, so if you're looking to properly serve most customers using iPhones, you'll want to find a different solution, unfortunately.