Scroll-to Anchors with fullscreen slider addon / "Back to top" button doesn't work

Loris

I have two simple questions that I unfortunately can't solve myself. Hopefully there are answers for these…

I did put the "Back to top button" on my vertical full screen slider, and it doesn't work. When clicking on it, it continues sliding down to the next slide. How can we solve that?
I would like to add Anchor tags to jump to specific location on my webpage. I first added some codding in the CSS… but it is not stable at all. When clincking on the tag it jumps without any transition. And after clicking on it the full screen slider doesn't work anymore. So, then, we can't navigate on the page anymore (the entire page is a full screen slider)

You'll see on my webpage [ http://lorispernoux.fr/v2017 ] the "INDEX". These are the tags. when clicking on it, I would like a "smooth scroll" that goes to the specific project that are down the page.

I hope this is a clear explanation… I would really appreciate some help!

Thank you very much in advance <3

arminunruh

Hi!

Ok first disable "Slide on Page Click" in "Lay Options" -> "Fullscreen Slider Addon". I couldn't make this work well with that option turned on :/.

In "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> content" put:

<script>
    jQuery(document).on('click', '.scrollto', function(e){
        e.preventDefault();
        e.stopPropagation();
        var sectionToScrollTo = jQuery(this).attr('data-scrollto');
        jQuery.fn.fullpage.moveTo(sectionToScrollTo);
    });
</script>
<style>
    .scrollto{
        cursor: pointer;
    }
</style>

Now in the Gridder add a new textelement. In the textelement click the "<>" code button. Now paste:

<div class="scrollto" data-scrollto="1">scroll to section 1</div>
<div class="scrollto" data-scrollto="2">scroll to section 2</div>
<div class="scrollto" data-scrollto="3">scroll to section 3</div>
<div class="scrollto" data-scrollto="4">scroll to section 4</div>
<div class="scrollto" data-scrollto="5">scroll to section 5</div>

This creates 5 clickable texts that will lead you to the respective section.
I know it is kind of tricky to do this. I will build this into the user interface one day :).

Hm, I guess it is a bug. Will write it down and fix it one day.

LERPERGER

Hey Armin!
Is it somehow possible to get the same effect as with those 5 "scroll to section" texts also with the regular Navigation/Menu points? with Html class and ID set to for example "section1" and then with a custom menupoint "#section1" it works that this section apears but it doesn't do it in a smooth scroll. Also in the adressline it is ugly then. "myhomepage.com/#section1"
Is there a way to configure this all a bit smoother?

mariusjopen

Hi @LERPERGER
not really right now.
The navigation is not editable.
You need to make a custom navigation like above.

And the url can also look like this: myhomepage.com/#1

Best!

Marius

anipol

@arminunruh Hello Armin,

thanks in advance for all your help.
I've been trying to follow this process to link some text elements (used as a menu) to few anchor points in a single page website, with the fullscreen slider plugin, but I'm probably missing the point.

In the "<div class="scrollto" data-scrollto="1">scroll to section 1</div>" where are we linking to? How am I supposed to tag the anchor point? As seen in other threads, I named the anchor point with its own #id , but here I wouldnt know how to proceed / what to tag and how to.

Hope I made myself clear enough..

thanks in advance,
Anita

mariusjopen

Dear @anitapoltronieri
does this here help?
http://laythemeforum.com:4567/topic/4200/definitive-guide-to-smooth-scroll-to-anchors-from-menu/2

Best!

Marius

mariusjopen

Or this?
ANCHOR LINK
http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page/4

SMOOTH LINK
http://laythemeforum.com:4567/topic/2144/fade-effect-smooth-transitions-links-via-custom-html/2

Best!

Marius

zochovsky

This post is deleted!

Xamreglip

hi everyone. I'm pretty much overwelmed. Since almost two weeks i'm trying to make a normaly totally simple thing work but it just doesn't. I want to set an anchor point that directs to content more below on the same page. No animated java script, no menu bar. just a plain textlink like on the easiest html websites.
in the gridder at a surtan point –> set html class/id and then somewhere more up on the same page <a href="#soandso"

it jumps to the correct point and within a second all content disappears. nothing works anymore the page is completly bugged... it doesnt make any sense to m. its such a simple command... i dont know how to solve this....

i also followed already the way explained in the lay theme video: https://www.youtube.com/watch?v=W7VPyJp-I3c
same problem - all content disappears - nothing working...

@arminunruh please help

mariusjopen

Dear @Xamreglip
we are sorry to hear!
Can you post a link to our website?
Then we can have a look and inspect that.

Best is to set up a page where you already experimented with those anchor points.

Best!

Marius

Xamreglip

@mariusjopen

here a link to a test page
(no matter if project or page, it doesnt work anywhere so far. already tried many options):
http://loheland19.com/anchors-example

My links are written like this:
<a href="#spot1">anchor to SPOT1</a>
<a href="#spot2">anchor to SPOT2</a>
<a href="#spot3">anchor to SPOT3</a>

My anchors are written in 3 diffent ways now but non f them works:
anchor 1:
<a name="spot1"></a>SPOT 1

anchor 2:
<a id="spot2">SPOT2</a>

and anchor 3:
is generated through the back end laytheme gridder right click option window "Set html class and id"

with all 3 ways of linking it - it qucikly jumps to the spot but within a second all content disappears , nothing works anymore.

mariusjopen

Dear @Xamreglip
I would love to help but I need a password to access the page.

Best!

Marius

Xamreglip

Hi @mariusjopen the password to the anchor problme example pagewas the same a the login data. sorry I didnt make that clear. Now i removed to password anyways. link ist still: http://loheland19.com/anchors-example/
Also I sent you my login files via chat/PM last week.

So currently i still have issues regarding:
-any form of anchor points within a page/project.

and enabling page/project ID based buttons. My goal in detail see last post here ( –> http://laythemeforum.com:4567/topic/1473/hide-site-title-on-projects-pages in order to work around the bilingual issue)

Thank you for your help! I'm almost through with it:)

mariusjopen

Dear @Xamreglip
it forces to reload the pages which is weird. Can you deactivate all CUSTOM CODE and plugins? Test if it works then…

Best!

Marius

Xamreglip

@mariusjopen i remember having this problem already since the first day before i put any custom code or plugins. (See my post more up from September 26th)
I'm sending you again my login files. It would be so amazing if you could check on this please. i don't know how to proceed at this point unfortunately. I guess its just something i oversee but i tried so much on this...
Thank you so much!

Best
Max

horacio22

@xamreglip Hi. The same thing was happening to me. A simple anchor in the WP menu, and all the site for some reason went blank.

I tried this and it worked perfectly. I was going mad msyself. Hope it helps:
http://laythemeforum.com:4567/topic/4200/definitive-guide-to-smooth-scroll-to-anchors-from-menu

mariusjopen

Dear @Xamreglip
it should work with the newest update now.

Best!

Marius

mariusjopen

Dear @Xamreglip
we did an update with the scrollto. Does it work? If not… Can you please explain (again) in one short message what exactly is the issue? :-) Thank you!!!!!

:-D

Marius

Lay Theme Forum

Scroll-to Anchors with fullscreen slider addon / "Back to top" button doesn't work

Before you post:

When you post:

Online Users