Scroll to anchor
-
Hello Armin, hello Forum.
I have the following problem: I have created a way to jump to anchors from the Lay Theme menu on a customer's website. Now I need to fix that solution for sub pages (projects) as well. My workaround was to have a "zurück"-Button in the menu which leads back to the home page. But my customer wants that link to jump to the anchor again…
So my questions are:
-
is it possible to have my menu work on all pages? So no "zurück"-Button would be necessary?
-
or is it possible to make the "zurück"-Button jump to that anchor again?
Here is my code:
<script>
jQuery(document).ready( function() {
jQuery('a').addClass('scroll-to-anch');
});
</script><script>
jQuery(document).ready(function(){
jQuery('body').on('click', '.scroll-to-anch', function(event) {
event.preventDefault();
var id = jQuery(this).attr('href');
jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 );
});
})
</script>Thank you and regards!
Arne -
-
Hi Arne!
Without seeing the website it is difficult to help. Can you upload it on a test server?
Are you aware of this:
http://laytheme.com/documentation.html#custom-javascriptBecause your Lay Theme website is a "Single Page" JavaScript application you cannot just use jQuery(document).ready(…) to execute your js because the ready event only fires once when the website loads the first time.
Let me know!
Best!
Marius
-
@mariusjopen Hi Marius.
Oh yeah, I forgot the link in my first post, here we go: http://theartofmanagement.org/wp2017/
Yes, I know about the single page js-solution and I have read the documentation. Fiddling around with scripts didn't work out so far so I need help to get me on the way. Since my anchor menu basically works I have hopes to expand it to one of the solutions from my original post.
Thanks and regards,
Arne -
@mariusjopen Did you have time to look at my problem yet? Any ideas? Thank you!
-
Hi Arne,
ok. I got what you mean.
1. is it possible to have my menu work on all pages? So no "zurück"-Button would be necessary?
I would try to use the default way to use anchorpoints within the projects. Have a look here: http://www.echoecho.com/htmllinks08.htm
2. or is it possible to make the "zurück"-Button jump to that anchor again?
This would be a tricky one. but possible.
There is a thing called Javascipt History.
https://wiki.selfhtml.org/wiki/JavaScript/HistoryIt saves informations of the page you were coming from.
But I am not sure how easy that will be to implement.I hope that helps!
Best!
Marius
-
@mariusjopen Hello Marius,
I tried your first solution but this doesn't work. If I remove the JavaScript from the menu links every anchor link will open a new window/tab but won't scroll to the section of the page.
I already considered the second option but I gues that would only bring me back to my main page and not scroll to the anchor.
I would need a script that does the following:
- jump to the main page and load it
- when loaded scroll down to the respectable section
Hmmm, that should be possible, don't you think?
Regards, Arne
-
Hi Arne!
Did you try this solution?
http://laythemeforum.com:4567/topic/947/scroll-to-anchors-with-fullscreen-slider-addon-back-to-top-button-doesn-t-work/2Best!
Marius
-
@mariusjopen Yes, I had a look at that. But that solution only works on one page but doesn't solve the problem of getting from a project page back to the main page (and scroll down)…
-
Hi Arne,
I think there is no clean solution for this. You will have to find a workaround.
I tried this and it worked:
I created a link like this in a html textbox in the gridder:<a name="chapter4"></a>
Then I added
#chapter4
to the end domain and it jumped down to the anchor.You will probably need to build an extra navigation which has the ````#ancors````` in the end of the url.
Like in the example I sent you in the beginning.
I hope that was not too confusing :-)
Best!
Marius
-
This post is deleted!
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it