Anchor and link in same href without losing effect

Asked

Viewed 187 times

0

I have a problem, I have a javascript file that makes the scroll smooth when I click an anchor, but I need this href to contain the anchor but also contain the link so when I’m on another page go back to the one I want, already tried to do something like href="index.php#header" but when I do this the smooth scroll effect goes away, I wanted to do when it’s on the index.php page it gets the smooth scroll at the anchor and when it’s on another page it serves as a link to the index.php.

/****JAVASCRIPT **********/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function(e, f, a, h, g) {
        return jQuery.easing[jQuery.easing.def](e, f, a, h, g)
    },
    easeInQuad: function(e, f, a, h, g) {
        return h * (f /= g) * f + a
    },
    easeOutQuad: function(e, f, a, h, g) {
        return -h * (f /= g) * (f - 2) + a
    },
    easeInOutQuad: function(e, f, a, h, g) {
        if ((f /= g / 2) < 1) {
            return h / 2 * f * f + a
        }
        return -h / 2 * ((--f) * (f - 2) - 1) + a
    },
    easeInCubic: function(e, f, a, h, g) {
        return h * (f /= g) * f * f + a
    },
    easeOutCubic: function(e, f, a, h, g) {
        return h * ((f = f / g - 1) * f * f + 1) + a
    },
    easeInOutCubic: function(e, f, a, h, g) {
        if ((f /= g / 2) < 1) {
            return h / 2 * f * f * f + a
        }
        return h / 2 * ((f -= 2) * f * f + 2) + a
    },
    easeInQuart: function(e, f, a, h, g) {
        return h * (f /= g) * f * f * f + a
    },
    easeOutQuart: function(e, f, a, h, g) {
        return -h * ((f = f / g - 1) * f * f * f - 1) + a
    },
    easeInOutQuart: function(e, f, a, h, g) {
        if ((f /= g / 2) < 1) {
            return h / 2 * f * f * f * f + a
        }
        return -h / 2 * ((f -= 2) * f * f * f - 2) + a
    },
    easeInQuint: function(e, f, a, h, g) {
        return h * (f /= g) * f * f * f * f + a
    },
    easeOutQuint: function(e, f, a, h, g) {
        return h * ((f = f / g - 1) * f * f * f * f + 1) + a
    },
    easeInOutQuint: function(e, f, a, h, g) {
        if ((f /= g / 2) < 1) {
            return h / 2 * f * f * f * f * f + a
        }
        return h / 2 * ((f -= 2) * f * f * f * f + 2) + a
    },
    easeInSine: function(e, f, a, h, g) {
        return -h * Math.cos(f / g * (Math.PI / 2)) + h + a
    },
    easeOutSine: function(e, f, a, h, g) {
        return h * Math.sin(f / g * (Math.PI / 2)) + a
    },
    easeInOutSine: function(e, f, a, h, g) {
        return -h / 2 * (Math.cos(Math.PI * f / g) - 1) + a
    },
    easeInExpo: function(e, f, a, h, g) {
        return (f == 0) ? a : h * Math.pow(2, 10 * (f / g - 1)) + a
    },
    easeOutExpo: function(e, f, a, h, g) {
        return (f == g) ? a + h : h * (-Math.pow(2, -10 * f / g) + 1) + a
    },
    easeInOutExpo: function(e, f, a, h, g) {
        if (f == 0) {
            return a
        }
        if (f == g) {
            return a + h
        }
        if ((f /= g / 2) < 1) {
            return h / 2 * Math.pow(2, 10 * (f - 1)) + a
        }
        return h / 2 * (-Math.pow(2, -10 * --f) + 2) + a
    },
    easeInCirc: function(e, f, a, h, g) {
        return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a
    },
    easeOutCirc: function(e, f, a, h, g) {
        return h * Math.sqrt(1 - (f = f / g - 1) * f) + a
    },
    easeInOutCirc: function(e, f, a, h, g) {
        if ((f /= g / 2) < 1) {
            return -h / 2 * (Math.sqrt(1 - f * f) - 1) + a
        }
        return h / 2 * (Math.sqrt(1 - (f -= 2) * f) + 1) + a
    },
    easeInElastic: function(f, h, e, l, k) {
        var i = 1.70158;
        var j = 0;
        var g = l;
        if (h == 0) {
            return e
        }
        if ((h /= k) == 1) {
            return e + l
        }
        if (!j) {
            j = k * 0.3
        }
        if (g < Math.abs(l)) {
            g = l;
            var i = j / 4
        } else {
            var i = j / (2 * Math.PI) * Math.asin(l / g)
        }
        return -(g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e
    },
    easeOutElastic: function(f, h, e, l, k) {
        var i = 1.70158;
        var j = 0;
        var g = l;
        if (h == 0) {
            return e
        }
        if ((h /= k) == 1) {
            return e + l
        }
        if (!j) {
            j = k * 0.3
        }
        if (g < Math.abs(l)) {
            g = l;
            var i = j / 4
        } else {
            var i = j / (2 * Math.PI) * Math.asin(l / g)
        }
        return g * Math.pow(2, -10 * h) * Math.sin((h * k - i) * (2 * Math.PI) / j) + l + e
    },
    easeInOutElastic: function(f, h, e, l, k) {
        var i = 1.70158;
        var j = 0;
        var g = l;
        if (h == 0) {
            return e
        }
        if ((h /= k / 2) == 2) {
            return e + l
        }
        if (!j) {
            j = k * (0.3 * 1.5)
        }
        if (g < Math.abs(l)) {
            g = l;
            var i = j / 4
        } else {
            var i = j / (2 * Math.PI) * Math.asin(l / g)
        }
        if (h < 1) {
            return -0.5 * (g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e
        }
        return g * Math.pow(2, -10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j) * 0.5 + l + e
    },
    easeInBack: function(e, f, a, i, h, g) {
        if (g == undefined) {
            g = 1.70158
        }
        return i * (f /= h) * f * ((g + 1) * f - g) + a
    },
    easeOutBack: function(e, f, a, i, h, g) {
        if (g == undefined) {
            g = 1.70158
        }
        return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a
    },
    easeInOutBack: function(e, f, a, i, h, g) {
        if (g == undefined) {
            g = 1.70158
        }
        if ((f /= h / 2) < 1) {
            return i / 2 * (f * f * (((g *= (1.525)) + 1) * f - g)) + a
        }
        return i / 2 * ((f -= 2) * f * (((g *= (1.525)) + 1) * f + g) + 2) + a
    },
    easeInBounce: function(e, f, a, h, g) {
        return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a
    },
    easeOutBounce: function(e, f, a, h, g) {
        if ((f /= g) < (1 / 2.75)) {
            return h * (7.5625 * f * f) + a
        } else {
            if (f < (2 / 2.75)) {
                return h * (7.5625 * (f -= (1.5 / 2.75)) * f + 0.75) + a
            } else {
                if (f < (2.5 / 2.75)) {
                    return h * (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375) + a
                } else {
                    return h * (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375) + a
                }
            }
        }
    },
    easeInOutBounce: function(e, f, a, h, g) {
        if (f < g / 2) {
            return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a
        }
        return jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a
    }
});
<!-- AQUI ESTÁ O HEADER QUE CONTÉM AS ÂNCORAS E OS HREF -->
<!-- Navigation -->
<nav  id='cabecalho' class='navbar navbar-custom navbar-fixed-top' role='navigation'>

        <div class='navbar-header inDiv'>
           
            <a class='page-scroll' href='index.php#header'>
                <img id='logo' src='img/logo.png' width='300px' >
            </a>

            <!--Menu -->
            <div id='menu' class='navbar'>
                        <ul class='nav navbar-nav navbar menu' id='removeHover'>
                            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                            <li class='hidden'>
                                <a href='#page-top'></a>
                            </li>
                             <li>
                                <a class='page-scroll' href='#sales'>Sales</a>
                            </li>
                            <li>
                                <a class='page-scroll' href='#acquisition'>Acquisition</a>
                            </li>
                            <li>
                                <a class='page-scroll' href='#letting'>Lettings</a>
                            </li>
                            <li>
                                <a class='page-scroll' href='#commercial'>Commercial</a>
                            </li>
                        </ul>
            </div>
        </div>

        <!--Telefone e E-mail -->
    <div id='contato' class='nav navbar-nav navbar-right'>
           <a  id='phone' href='tel:+4402079383777'><p  class='text'>+44 020 7938  3777</p></a>
           <a  id='mail2' href='mailto:[email protected]'><p class='text'><strong>[email protected]</strong></p></a>
</nav>
";

<!-- END HEADER -->

   <!--AQUI ESTÁ ONDE PRECISO CARREGAR QUANDO FOR CLICADO TANTO EM ANCORA QUANTO LINK COMUM -->
<header class="intro content-block" id="header" > 
       <div id="boxMobile" class="boxMobile">
            <button type="button" class="btnMobile" href="tel:+4402079383777">+44 020 7938 3777</button><br>
            <button type="button" class="btnMobile" href="mailto:[email protected]">[email protected]</button>
       </div>
        <div id='loadercab' class='loadercab' style='display:none;'></div>
        <div  id='fraB' style='width=100%;'>
            <section class="bottom">
                    <a id="scrollToContent" style='display:none;' href="#">
                        <img src="img/arrow_down.png">
                    </a>
            </section>
            <span id='frase' style='display: none;' class='ver'>Proactive Property People</span> <button style='display: ;' id='btnOpen' onclick='modalOpen();'><span style='padding-top: 5px;'>VALUATION</span><span>ENQUIRY</span><svg width='50' height='50' id='btnSvg'><circle style='margin-bottom: 31px;' cx='18' cy='18' r='18' stroke-width='0' fill='white' />Sorry, your browser does not support inline SVG.</svg> </button>
        </div>
</header>

1 answer

0

Simple. Include the file that contains the Scroll function only in the index which is where you want the effect, in the others let only the native behavior take care of the work (redirect to the anchor of the index page).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.