Javascript scroll effect on a menu

Question

So I have a menu on a home page that has scroll effect to contact form.

<li><a href="{{ 'home'|page }}" class="scroll">Contact</a></li>

And it works like a charm on the home page but if a user is on a different page, let say about or blog and clicks on Contact link she/he gets a redirect on a home page but scroll effect never takes place.

Is it possible to make that happen when a user is on a different page and clicks that link?

Code for scroll is:

$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$("#contact").offset().top},"500");return false})})

Console log after yezzz suggestion:

EDIT: oops misread... What's the url in the href after the page is rendered? They all point to example.com/#contact ? — yezzz, Mar 30 '16 at 19:16
Btw, that scroll script came with the theme? But you can modify it? — yezzz, Mar 30 '16 at 21:19

score 0 · Answer 1 · answered Mar 30 '16 at 19:32

0

If other pages are sending you to #contact on your homepage, then you could trigger the click:

$(function(){
    $(".scroll").click(function(){
        $("html,body").animate({scrollTop:$("#contact").offset().top},"500");
        return false;
    });
    if (window.location.hash == "#contact") $(".scroll").trigger("click");
});

answered Mar 30 '16 at 19:32

yezzz

2,990
1
10
19

Actually, that link leads just to a home page. October CMS doesn't have the best documentation so I don't know how to add #contact to {{ 'home'|page }}. – Kira Mar 30 '16 at 19:40
If the site is live can you give me the url? – yezzz Mar 30 '16 at 19:44
Here it is. It is not finished so I will let it be live for 10-20 mins for you to check http://petfriendlyapp.com/ – Kira Mar 30 '16 at 20:04
I only had a short chance to see it, but I see the above isn't gonna work. Linking to #contacts would also not scroll, but jump straight to #contacts. Can you put scripts on every page? Then you could pass an url parameter and read it on home page. Another way would be to check http referrer. Last option I can think of right now is use a cookie or localstorage to set a flag, then process it on homepage. – yezzz Mar 30 '16 at 20:42
Script is on every page. Well I guess I'll have to think of some other way of doing it. too complicated. But thanks for your time. – Kira Mar 30 '16 at 20:55
You're welcome. Yeah I can't think of any easy solution. Maybe look into window.open method. – yezzz Mar 30 '16 at 21:04

yezzz · Answer 2 · 2016-03-30T23:14:08.640

0

Well thought I 'd give it a shot using localstorage. Replace the default script (on all pages) with following and check your console for errors.

$(function(){
    $(".scroll").click(function(){
        $("html,body").animate({scrollTop:$("#contact").offset().top},"500");
        return false;
    });
    if (typeof(Storage) !== "undefined") {
        // localstorage is supported    
        if (location.pathname === "/") {
            // we're on homepage
            if (localStorage.triggerScroll == 1) {
                localStorage.triggerScroll = 0;
                $(".scroll").trigger("click");
            }
        } else {
        // we 're on another page
        $(".scroll").click(function(){
            localStorage.triggerScroll = 1;
        });
    }
});

edited Mar 30 '16 at 23:14

answered Mar 30 '16 at 22:17

yezzz

2,990
1
10
19

Unfortunately that code breaks my off-canvas menu so I can't even try it. Omg why is this so hard... – Kira Mar 30 '16 at 22:25
hmm I wouldn't know without seeing what happens. Did you get any error in the console? – yezzz Mar 30 '16 at 22:28
you did see I edited the code some minutes after posting it? – yezzz Mar 30 '16 at 22:29
I tried it one more time to be safe but my off canvas menu is still broken whit this code. I use Foundation 6 off canvas... – Kira Mar 30 '16 at 22:32
if there's no error in your log I wouldn't know what goes wrong, as it only reads/writes location and localstorage, and triggers the click on homepage. – yezzz Mar 30 '16 at 22:37
I've updated initial post. There are plenty of errors unfortunately. – Kira Mar 30 '16 at 22:52
yeah sorry forget to close .click ... I edited my code... so try again – yezzz Mar 30 '16 at 23:15
Still errors. I have to sleep over it. I will try to fix errors tomorrow. Thanks. – Kira Mar 30 '16 at 23:19

Javascript scroll effect on a menu

2 Answers2