Question

I’m having an odd problem on Safari (Mac OS only, Windows works fine), where my smooth scroll is not scrolling. It just jumps to the link, but works in all other browsers, even on windows Safari.

My jQuery is

            <script type="text/javascript">
        (function($){
    $.extend({   
        smoothAnchors : function(speed, easing, redirect){  
            speed = speed || "slow";
            easing = easing || null;
            redirect = (redirect === true || redirect == null) ? true : false;
            $("a").each(function(i){            
                var url = $(this).attr("href");
                if(url){
                    if(url.indexOf("#") != -1 && url.indexOf("#") == 0){
                        var aParts = url.split("#",2);
                        var anchor = $("a[name='"+aParts[1]+"']");
                        if(anchor){                                                         
                            $(this).click(function(){                      
                                if($(document).height()-anchor.offset().top >= $(window).height()
                                 || anchor.offset().top > $(window).height()
                                 || $(document).width()-anchor.offset().left >= $(window).width()
                                 || anchor.offset().left > $(window).width()){                 
                                    $('html, body').animate({
                                        scrollTop: anchor.offset().top,
                                        scrollLeft: anchor.offset().left
                                    }, speed, easing, function(){
                                        if(redirect){ 
                                            window.location = url 
                                        }
                                    });
                                }
                                return false;                           
                            });
                        }
                    }   
                }
            });
        }
    });
})(jQuery);
</script>

and my HTML looks like this

<nav id="nav">
<ul id="navigation">
    <li><a href="#About" class="fade"> ABOUT</a></li>
<a name="About"></a>

If anybody knows what the issue, please let me know!

Much appreciated.

Answer 1

Works great for me!

(function($) {
    $.fn.SmoothAnchors = function() {

        function scrollBodyTo(destination, hash) {

            // Change the hash first, then do the scrolling. This retains the standard functionality of the back/forward buttons.
            var scrollmem = $(document).scrollTop();
            window.location.hash = hash;
            $(document).scrollTop(scrollmem);
            $("html,body").animate({
                scrollTop: destination
            }, 200);

        }

        if (typeof $().on == "function") {
            $(document).on('click', 'a[href^="#"]', function() {

                var href = $(this).attr("href");

                if ($(href).length == 0) {

                    var nameSelector = "[name=" + href.replace("#", "") + "]";

                    if (href == "#") {
                        scrollBodyTo(0, href);
                    }
                    else if ($(nameSelector).length != 0) {
                        scrollBodyTo($(nameSelector).offset().top, href);
                    }
                    else {
                        // fine, we'll just follow the original link. gosh.
                        window.location = href;
                    }
                }
                else {
                    scrollBodyTo($(href).offset().top, href);
                }
                return false;
            });
        }
        else {
            $('a[href^="#"]').click(function() {
                var href = $(this).attr("href");

                if ($(href).length == 0) {

                    var nameSelector = "[name=" + href.replace("#", "") + "]";

                    if (href == "#") {
                        scrollBodyTo(0, href);
                    }
                    else if ($(nameSelector).length != 0) {
                        scrollBodyTo($(nameSelector).offset().top, href);
                    }
                    else {
                        // fine, we'll just follow the original link. gosh.
                        window.location = href;
                    }
                }
                else {
                    scrollBodyTo($(href).offset().top, href);
                }
                return false;
            });
        }
    };
})(jQuery);

$(document).ready(function() {
    $().SmoothAnchors();
});

https://github.com/alextrob/SmoothAnchors