Safari(Mac OS）上的jQuery平滑滚动问题

jQuery Smooth Scroll issue on Safari (Mac OS)

本文关键字：jQuery 平滑 滚动 问题 上的 Mac OS Safari      更新时间：2023-09-26

我在Safari上遇到了一个奇怪的问题（仅限Mac操作系统，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>

如果有人知道问题出在哪里，请告诉我！

非常感谢。

非常适合我！

(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

相关文章：