Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Anchor smooth scroll?

Featured Lock Resolved Issue
I have been asking this question for many years.
How can I apply "smooth scroll" to an anchor with offset?

I have helix ultimate and page builder pro

19 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
so far only Navigation addon has it,
other methods are based on extra plugins which may have this feature as well

Paul Frankowski - Staff

More than a month ago #Permalink
For example
QLSmoothScroll
QLSmoothScroll_admin_settings.jpg

Attachments (1)

  • QLSmoothScroll_admin_settings.jpg
    QLSmoothScroll_admin_settings.jpg 42.6 KB

Kami Hosseinian

More than a month ago #Permalink
For example
QLSmoothScroll
[attachment]QLSmoothScroll_admin_settings.jpg[/attachment]


Thank you!
But for years JoomShaper promises this option. Just look in the forum, how old are the customer requirements.

PlugIns is not working.

What I do not understand. Script is there and is used for "go up" button or navigation.
<a href"#mynav" data-scroll-to="true">

Attachments (1)

  • Bildschirmfoto 2019-03-19 um 20.52.38.png
    Bildschirmfoto 2019-03-19 um 20.52.38.png 46.9 KB

Paul Frankowski - Staff

More than a month ago #Permalink
CSS class field is in most cases for a whole addon, NOT for a link.

Paul Frankowski - Staff

More than a month ago #Permalink
But in Button addon CSS class is for a link.


BTW
Have you checked also this plugin: Scroll To CK
as I know it works better than mentioned above.

Kami Hosseinian

More than a month ago #Permalink
I try both. But nothing work.
CSS Class field … but solution?
The problem is, you can not assign a class to a link.

Paul Frankowski - Staff

More than a month ago #Permalink
sorry, but those are not our products, plugins to deliver you help with this.
Also, I cannot edit PHP files during support.

Kami Hosseinian

More than a month ago #Permalink
Thanks but I mean, how can I assign a css class to the anchor in "PageBuilder" or "Helix". (Without overwriting anything in the core)

Paul Frankowski - Staff

More than a month ago #Permalink
Each Row in Helix Ultimate have custom CSS class field
---
But I guess you wanted to know about the menu items
example

menulink_addclass_1_en.png

Attachments (1)

  • menulink_addclass_1_en.png
    menulink_addclass_1_en.png 15.6 KB

Kami Hosseinian

More than a month ago #Permalink
Thank you for your idea!
Either I did not describe the problem well or JoomShaper does not want to understand the problem!

I know that all rows in helix have a custom css. That does not solve my problem with anchor.

I try to describe the problem again:
There are different links!
- Navigation Link from Joomla (Here you can use a CCS class as described, it does not have to do with PageBuilder and smooth scroll will not work if no 3rd party plugin is installed.)
- Links in PageBuilder as navigation (This works very well)
- There are also various other elements, such as a picture, a button or a text. You can also use them all as links or anchors.
It's about all links or anchors in PageBuilder. In PageBuilder, a link or anchor can not be assigned a CSS class.
Exception "Nav" in PageBuilder.

I solved myself the problem with "qlsmoothscroll". Unfortunately not very good but it works.
#anchor "class =" smooth scroll "

Paul Frankowski - Staff

More than a month ago #Permalink
I gave you fishing rod, not fish, it's time to understand it.

hojaweb

More than a month ago #Permalink
Hi all!

QLSmoothScroll works fine with Helix Ultimate but... how to use with HOME link?

When you click in home link no scroll is used. Only reload page.

Any way to solve it, please?

Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
Maybe make a fake home.

Create two home menu items,
1st one real, but hidden om menu
and 2nd one show in menu, where you can add link to header or logo.

hojaweb

More than a month ago #Permalink
Excuse me Paul but i do not know how to do this.

Can you explain please?

Paul Frankowski - Staff

More than a month ago #Permalink
0-O
0-0.png

Attachments (1)

  • 0-0.png
    0-0.png 15.1 KB

hojaweb

More than a month ago #Permalink
Thanks Paul.

Works but only when i set # as link and without smooth scroll

If i set link as #sp-logo ot #sp-header not works

smoothscroll class is set

hojaweb

More than a month ago #Permalink
Solved using id in first slide

Thanks

Kami Hosseinian

More than a month ago #Permalink
Hello hojaweb,

I have been trying for years to find a good and working solution.
For many years I use PageBuilder and Helix from JoomShaper. I really appreciate their work.
Although they have done much more complex things, they do not create a smooth scroll. Here you will not find an answer. I have been trying for years. Unfortunately, unsuccessful!

It does not work with a plugin either.
For example, if you put an anchor on the PagBuilder under ID, the smooth styles will not work.

And the last problem is positioning (offset).
The beginning of a section is not visible if you have Sticky menu, for example. Personally, I find it bad if the section appears without a top distance.

The problem can be solved but cumbersome.
No matter what you do, you need two sections. the inner section gets anchor ID. the outside creates by padding or margin for the distance.

Search for smooth scroll script and put it in the header of your template. But if you use PageBuilder, you can enter the anchor in the ID area like this:
#anchor "class =" your-css "
It does not always work :(

hojaweb

More than a month ago #Permalink
Hello hojaweb,

I have been trying for years to find a good and working solution.
For many years I use PageBuilder and Helix from JoomShaper. I really appreciate their work.
Although they have done much more complex things, they do not create a smooth scroll. Here you will not find an answer. I have been trying for years. Unfortunately, unsuccessful!

It does not work with a plugin either.
For example, if you put an anchor on the PagBuilder under ID, the smooth styles will not work.

And the last problem is positioning (offset).
The beginning of a section is not visible if you have Sticky menu, for example. Personally, I find it bad if the section appears without a top distance.

The problem can be solved but cumbersome.
No matter what you do, you need two sections. the inner section gets anchor ID. the outside creates by padding or margin for the distance.

Search for smooth scroll script and put it in the header of your template. But if you use PageBuilder, you can enter the anchor in the ID area like this:
#anchor "class =" your-css "
It does not always work :(



Thanks a lot for your time and explanations


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 102
Toufiq

Toufiq

Total Accepted Answers: 53
Sifat

Sifat

Total Accepted Answers: 38
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 22
Ofi Khan

Ofi Khan

Total Accepted Answers: 21

119

Templates

306608

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us