Question

我在Safari上遇到一个奇怪的问题（仅限Mac OS，Windows工作正常），我的平滑滚动不滚动。它只是跳转到链接，但适用于所有其他浏览器，甚至在Windows Safari上。

我的jQuery是

            <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>

我的HTML看起来像这样

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

如果有人知道这个问题，请告诉我！

非常感谢。

Answer 1

非常适合我！

(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

Safari上的jQuery Smooth Scroll问题（Mac OS）

1 个答案: