Hi there! I’m looking to activate a smooth scroll on my website.
I’m currently using dawn theme, but I edited the home page using pagefly app.
Ideally, I’d like “features” (main menu) to scroll to this section:
And “reviews” (main menu) to scroll to this section:
My website is:
Any help or guidance would be much appreciated!
Thank you in advance 
Hi @ecom_newb ,
Please follow the steps below:
Code:
{% if link.title == 'Features' %}data-header-smooth="pf-cf5e"{% elsif link.title == 'Reviews' %}data-header-smooth="pf-7e85"{% endif %}
class SmoothScroll {
constructor() {
document.querySelectorAll('[data-header-smooth]').forEach(
(menu) => menu.addEventListener('click', this.onButtonClick.bind(this))
);
}
onButtonClick(event) {
event.preventDefault();
const element = event.currentTarget.dataset.headerSmooth;
window.setTimeout(() => {
document.querySelector(`[data-section-id="${element}"]`).scrollIntoView({
behavior: "smooth",
block: "start"
});
});
}
}
new SmoothScroll();
Hope it helps!
@LitCommerce AMAZING :):)
Very happy with the outcome, thank you!
Is there a way to enable it on mobile as well?
PS… the scroll function doesn’t work when I’m viewing a page other than the homepage.
Is there way to enable the scroll when visiting different pages on the website, to bring the user back to the homepage and straight to the section? On both desktop/mobile.
Hi @ecom_newb ,
Because your code is added by ‘pagefly app’ so each page will have its own id you need to add separate codes for different pages.
Which page do you want to change? Please send me the link, I will check it.
Hope it helps!
Hi @ecom_newb ,
I really don’t understand, can you explain more about it. Description with screenshots every step you want.
I will check it.
@LitCommerce whenever I am on the pages that I linked (any page other than the home page), the features/reviews scroll does not work the smooth scroll for features/reviews only works when on the home page.
Hi @ecom_newb ,
I checked and the pages you submitted don’t have the features/reviews section. Can you send me screenshots of the sections you want to scroll to. I will check it.
Thank you for the help. I apologize if this is confusing.
The smooth scroll to features/reviews does not work when on a page where these sections are not visible. When on a page that’s NOT the home page/https://showerbeats.com and features/reviews is clicked, I would like to revert BACK to the home page/https://showerbeats.com (where the features/reviews sections are) and scroll to the features/reviews sections. Is this possible?
For example…
When on https://showerbeats.com/pages/faqs and “features” is clicked;
I would like for it to revert back to the home page https://showerbeats.com/
and scroll to the features section:
Hi dear Hope you doing well, smooth scrolling feature is most important in themes. we also need to smooth scroll on our collection pages. I have a solution for products with a smooth infinite scroll with multiple animation styles. Try this one hope you enjoy significant sales and enhanced customer experience.
