Link to Anchor from another page

joeclarkx

Hello

Thank you for Laytheme, it's great!

I am trying to see if I can link to an anchor tag from the landing page. In this way I could have the same introductory copy on all pages so that that it is visible when it is a direct visit, but skipped over when linked to from within the site.

http://joeclark.photo

I am experimenting with the blue link 'architecture' in the copy and want it to link to the correct page and then scroll to the second row #arch.1 thus skipping the copy.

I can get the scroll I want from joeclark.photo/architecture but not when linking to it from joeclark.photo

There are a few threads which I have read and tried to implement but without success:
http://laythemeforum.com:4567/topic/1511/anchor-links-on-another-page/2
http://laythemeforum.com:4567/topic/1261/scroll-to-anchor-on-another-page

I am about to give up as it seems this is outside my skill level, but if anyone has a suggestion I would be happy to hear it.

Thanks
Joe

mariusjopen

Dear Joe,

I am myself trying to figure it out.

I came that far without success:

In the <Custom Head> I inserted this code:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    if(jQuery("body").hasClass("slug-work")){
        var hash = location.hash;
        
        jQuery('html, body').animate({
            scrollTop: jQuery(hash).offset().top,
        },
        {
            duration: 1200,
            easing: "easeOutSine"
        });
    }
    
});
</script>

Then on the Home page (work page in my case) I made an image with a link like the following:
0_1519848817425_Bildschirmfoto 2018-02-28 um 17.12.36.png

In the page I want to link to I added the class and ID ```ànchor````to the element I want to scroll to:
0_1519848870861_Bildschirmfoto 2018-02-28 um 17.13.48.png

The URL when it links to the new page always has a / before the #. Which make the anchor ineffective:
http://localhost:8888/anchor/#anchor

I will check what is the problem with Armin and will get back to you.

All the best!

Marius

joeclarkx

@mariusjopen Thanks!

Thats the same behaviour I was encountering and I'm too much of a noob to know if I was doing something wrong, or if it was something outside of my control.

Looking fwd to hear more!

arminunruh

Ok so I have an image in page1 and I give it an ID.
You can also give a row an ID, doesn't matter. Right click -> set html class and id

0_1520010530521_Screen Shot 2018-03-02 at 18.01.44.png

Now on another page, I create a link. Here I create a link on an image, but you could also create a link when you edit text. The important part is "#hello".
"hello" is the id that I set before.

0_1520010512900_Screen Shot 2018-03-02 at 18.02.21.png

Now I think Marius' code is probably right, maybe the problem was just that the easing named 'easeOutSine' doesn't exist. Not 100% sure here.
Add the following code to "Lay Options" -> "Custom <head> content":

<script>
    window.laytheme.on('newpageshown', function(){
       if(window.location.hash.length > 0){
           var id = window.location.hash;
           if(jQuery(id).length > 0){
                jQuery('html, body').animate(
                { scrollTop: jQuery(id).offset().top },
                { duration: 1200 });
           }
       } 
    });
</script>

That code above is cool cause it works for all pages

mariusjopen

Smooth brother! Smooth! :-D

Finally!

diesestudio

Hey @arminunruh,

I was looking exactly for this function!
Everything works quite fine – but the anchor I want to link to is inside a full screen slide.

Now I Have the problem that after using the anchor I can't use the Slider anymore and it is not in its right position and there is a white border at the bottom.

It seems like everything is a bit shiftet. (Screenshot)

0_1536941878768_Bildschirmfoto 2018-09-14 um 18.12.46.png

Do you have a solution for that?

Cheers

Jonas

mariusjopen

Dear @diesestudio
can you send a link to your website?

Best!

Marius

mrrpringle

Hi, this works great for my desktop site, however it seems to malfunction when I try it on mobile. Any thoughts on a solution? Thank you!

mariusjopen

Dear @mrrpringle
can you send a link to your website?

Best!

Marius

mrrpringle

Hi, yes here: [http://mackenziepringle.com/hirshhorn

If you tap 'hide description' on this page on mobile, it seems to anchor to a lower coordinates even though I've assigned the link to anchor back to the top of the project. The 'hide description' link should bring you to http://mackenziepringle.com/hirshhorn/#hirshhorn (works really well on desktop). Thanks in advance for any help here.

mariusjopen

Dear @mrrpringle
you might have a look here:
https://stackoverflow.com/questions/22643032/anchor-tag-doesnt-work-in-iphone-safari

Also you can think of an easier way to show and hide the description.
Have a look into jQuery and Accordeon… You could just hide and show the textbox.

Best!
Marius

mrrpringle

Cheers Marius! I'll look into it. Thank you.

mariusjopen

Great!!!!

m-czyk

Hello, everybody,

I also have the problem that after the latest Laytheme Update an element doesn't work anymore. I have a +-symbol in the upper right corner of the menu (www.studio-boldig.de), where a new menu has opened.

The url was after clicking https://studio-boldig.de#sbmenu or https://xy#sbmenu depending on where you were on the site and everything was fine. But now a "/" is inserted in between the url and it loads an empty page (https://studio-boldig.de/#sbmenu). How do I get rid of the "/" now?

I use this code:
<div>
<a class="button" href="#sbmenu">+</a>
</div>

i am happy about any help
best marcin

m-czyk

Now it works, but after i opened the menu i can not click on any intern link. just the links who goes outside.

mariusjopen

Dear @m-czyk
you got many errors in the console.
Your JS seems to create a bit of trouble.

Best!

Marius

m-czyk

@mariusjopen thx. i build it with js and now it works.

mariusjopen

Dear @m-czyk
nice to hear!

Marius

pmpm

Hey @arminunruh
This is great! Just one question. How can I add an offset to this, so it scrolls to the image but always has a gap of 80px above the image?
I hope you know what I mean. The problem is that it cuts off the image at the top https://fabienne-fischer.ch/works/#hello
Thanks a lot!

mariusjopen

Dear @pmpm
can you post the JS code which you use?

Best!

Marius