Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript JS working in Firefox not Chrome/Safari

wyclef

Active Coder
What am I missing here? I have a back to top link script working in Firefox which no longer works in Chrome or Safari wondering if anyone notices anything here? I have added alert messages through the script to test and make sure the entire script is running and am able to get prompts at every point. It seems like the clicking of the #back-to-top object just doesn’t scroll to top in chrome and safari.

JavaScript:
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:
HTML:
<div id="back-to-top" ><a href="#top"><span>Back to top</span></a></div>

CSS:
CSS:
#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;
}
 
At first glance your script may not be passing the $ through jQuery correctly for full browser support. When I copied the code into my test site I immediately got this error:

Uncaught TypeError: $ is not a function...

I've fixed this error in the past by passing the $ down the script like so:

JavaScript:
jQuery( document ).ready( function( $ ) {
    // code here
});

Notice the $ is passed as the parameter into the function, which can be used within that code. The $ basically represents jQuery, so a lazy way out could be to replace all $ with jQuery and see if that works.

Hope that helps.
 
This should work -
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
        el.click(function (e) {
            e.preventDefault();
            window.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);
            }
        });
    }
}
If you are using new jquery version than use this -
JavaScript:
$(document).ready(function() {
    initTopLink('#back-to-top', 400, 300);
});
 
Removed the scrollTo dependency and changed it to...

JavaScript:
// back to top scrollings
function initTopLink() {
    $(window).scroll(function() {
        var height = $(window).scrollTop();
        if (height > 100) {
            $('#back2Top').fadeIn();
        } else {
            $('#back2Top').fadeOut();
        }
    });
    $(document).ready(function() {
        $("#back2Top").click(function(event) {
            event.preventDefault();
            $("html, body").animate({ scrollTop: 0 }, "normal");
            return false;
        });

    });
}

Seems to work fine now.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom