Mobile Only Anchor

Ask the community
,
1

Hello all,

I have a section on mobile where I need to be able to click a button that automatically scrolls up to the connected text (an anchor). I don’t want the anchor/scroll to apply to the buttons on desktop. Is there a way to code mobile-only anchors?

Thanks in advance!

2

Hi natalie, yes you can!

Here you go…

1. Import the WixWindow API 

import wixWindow from 'wix-window';

2. Tell the code to run only on mobile or tablets

if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
    // Code to run on mobile or tablet
} else {
    // Code to run on only on desktop
}

3. Create your own anchor

You need an element to scroll to when you click on your button, let’s assume that you have a button on top of the page that has an ID of (#scroll), and you want to scroll to an element on the bottom of the page that has an ID of (#goHere).

$w('#scroll').onClick( (event) => {
    $w('#goHere').scrollTo();
});

To put everything together:

Final Code

import wixWindow from 'wix-window';

if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") { 

    $w('#scroll').onClick( (event) => {
        $w('#goHere').scrollTo(); 
    });
    
} else {
    console.info("You're on the web");
}

Hope that helped :wink:
Ahmad

3

I believe this will work, thanks! However, I already have “if mobile” coding for another section on the page and I keep getting errors when trying to use your code. Can you tell me where I should input this code? Also, when clicking on the “scroll” buttons, different text also appears. I have that coded elsewhere, should I add it to the code you wrote above?

2546×1218 354 KB

4

Hi @natalie75010 , if I’m not mistaken, I think that you want to shortened the text of an element and show a " Read More " button only when you’re on mobile , right?

If that’s true, your code will always short your text element because you’re not including the shortening statement in your if (on mobile) statement, am i right?

I’ve built a complete code for you from the ground up, try it or compare it with your code and tell me if it worked.

import wixWindow from 'wix-window';
let fullText;
let shortText;

if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") { 
    
    fullText = $w('#myTextElement').text;
    let subtractedText = $w('#readmorebutton').text.substr(0, 280);
    shortText = `${subtractedText} ...`;
    
    let TextIsShort = true;
    
    $w('#readmorebutton').show().then(() => {
        $w('#readmorebutton').onClick( (event) => {
            if (textIsShort === true) {
                $w('#myTextElement').text = fullText;
                $w('#readmorebutton').label = 'Show less';
            } else {
                $w('#myTextElement').text =  shortText;
                $w('#readmorebutton').label = 'Show more';
            }
        });
    }    
    
}

I’ll be happy to help :blush:
Ahmad

5

@ahmadnasriya Hey do you have any idea how could I set it up so it skips to the next one, not always the specific like for example skip to Pizza. I want to use this for mobile Restaurant menu so guests can skip from category to category. Thanks in advance. Basically , Pasta [CLICK] Pizza [CLICK] Fingerfood etc.

6

Quick update, you can now use the updated example for this and now use a multi state box.
https://support.wix.com/en/article/corvid-tutorial-expand-text-with-a-read-more-link

Plus, if you want to customise your mobile menu you can do that yourself as well through the use of code and not just through the editor only.
https://support.wix.com/en/article/customizing-your-mobile-menu-4726130
https://www.wix.com/corvid/forum/tips-tutorials-examples/introducing-the-new-mobile-menu
https://www.wix.com/corvid/reference/$w.MenuContainer.html

7

Hi, @11markov11 …
What do you mean by skipping? Clicking on a button to go to the next type of food?