How to Smooth scroll to sections?

Solved
Meir_Shopify
Tourist
14 0 1

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?

Accepted Solution (1)

Accepted Solutions
KarlOffenberger
Shopify Partner
1866 184 836

This is an 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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie

View solution in original post

Replies 13 (13)
KarlOffenberger
Shopify Partner
1866 184 836

This is an 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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie

View solution in original post

Meir_Shopify
Tourist
14 0 1

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
Shopify Partner
1866 184 836

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Meir_Shopify
Tourist
14 0 1

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
Tourist
14 0 1

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
Shopify Partner
1866 184 836

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Meir_Shopify
Tourist
14 0 1

Hey Karl, Thank you  

Meir_Shopify
Tourist
14 0 1

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
Excursionist
17 0 17

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