Link to Anchor from another page

joeclarkx

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

pmpm

@mariusjopen straight out of the youtube tutorial:

<script>
    
    jQuery(document).on( 'click', 'a[href^="#"]', function(e){
        e.preventDefault();
        var hash = jQuery(this).attr('href');
        var el = jQuery(hash);
        var top = el.offset().top;
        jQuery('html, body').animate({
            scrollTop: top
        }, 1200, 'swing',
            function() {
                window.location.hash = hash;
            }
        );
    } );
    
    window.laytheme.on('newpageshown', function(){
        var hash = window.location.hash; 
        var el = jQuery(hash);
        if(el.length > 0) {
            var top = el.offset().top;
            window.scroll(0, top);        
        }
    });
    
</script>

mariusjopen

Dear @joeclarkx

<script>
    
    jQuery(document).on( 'click', 'a[href^="#"]', function(e){
        e.preventDefault();
        var hash = jQuery(this).attr('href');
        var el = jQuery(hash);
        var top = el.offset().top+80;
        jQuery('html, body').animate({
            scrollTop: top
        }, 1200, 'swing',
            function() {
                window.location.hash = hash;
            }
        );
    } );
    
    window.laytheme.on('newpageshown', function(){
        var hash = window.location.hash; 
        var el = jQuery(hash);
        if(el.length > 0) {
            var top = el.offset().top;
            window.scroll(0, top);        
        }
    });
    
</script>

Best!

Marius

Lay Theme Forum

Link to Anchor from another page

Before you post:

When you post:

Online Users