Script working in Firefox but not Chrome and Safari


Joined
Mar 25, 2021
Messages
4
Reaction score
0
H, I have a simple back to top link script working in Firefox which no longer works in Chrome or Safari wondering if anyone notices anything here? For simplicity purposes I just extracted the relevant code as to not have you rummaging through a bunch of stuff looking. Thanks!

JavaScript:
jQuery(window).load(function () {
    initTopLink('#back-to-top', 400, 300);
});

// back to top scrolling
function initTopLink(element, min, fadeSpeed) {
    var el = $(element);
    if ($(window).height() >= min) {
        // Scroll Top Link
        $(element).click(function (e) {
            e.preventDefault();
            $.scrollTo(0, 300);
            return false;
        });

        //listen for scroll
        el.hide(); //in case the user forgot
        $(window).scroll(function () {
            if ($(window).scrollTop() == "0") {
                el.fadeOut(fadeSpeed);
            } else {
                el.fadeIn(fadeSpeed);
            }
        });
    }
}


HTML:
<div id="back-to-top" ><a href="#top"><span>Back to top</span></a></div>

CSS:
/* Back to Top */
#back-to-top span { display: none; }
#back-to-top {
    border: none;
    bottom: 0;
    cursor: pointer;
    display: none;
    margin-bottom: 30px;
    position: fixed;
    right: 30px;
    z-index: 50000;
    height: 0;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 32px solid #e02d42;

    -moz-transform: scale(.9999);
}
    #back-to-top a:hover {
        border: none;
    }
 
Ad

Advertisements

Joined
Mar 25, 2021
Messages
4
Reaction score
0
If I add

JavaScript:
alert ("message");

to each part of the script I got prompts at each step so I know the script is being run but only scrolls to top in Firefox.

Here is the plugin code associated with this.

JavaScript:
/**
 * Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | https://flesler.blogspot.com
 * Licensed under MIT
 * @author Ariel Flesler
 * @version 1.4.14
 */
;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
 
Joined
Nov 27, 2019
Messages
163
Reaction score
24
They're must be something missing. I could not get the "Back to top" button to ever become visable. If I removed the CSS the link appears and just clicking it goes to top of page (I added things to the BODY to have a long page) in FF and Chrome. I do not have I do not have Safari installed nor will I get it.
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
28
Reaction score
6
I couldn't get yours to scroll to the top in FF. I was getting scrollTo not a function or something to that effect. I changed that line to:

JavaScript:
$("html, body").animate({ scrollTop: 0 }, "slow");
and it worked in FF and Chrome. I added a few paragraphs of Lorem ipsum and breaks to get the link to show up.
JavaScript:
jQuery(window).load(...
is also deprecated in favor of:
JavaScript:
jQuery(window).on('load',...

I was testing with jQuery 3 and the .load function didn't work at all. But, the above did work on jQuery 2 and 3.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top