如果 URL 有哈希值，则 jQuery 滚动顶部

发布于 2024-12-11 05:25:19 字数 798 浏览 0 评论 0原文

我编写了这个简单的插件，它可以平滑滚动浏览器窗口并将哈希链接添加到 URL。

$.fn.extend({
    scrollWindow: function(options) {
        var defaults = { duration: "slow", easing : "swing" }                 
        var options =  $.extend(defaults, options);
        return this.each(function() {             
            $(this).click(function(e) {
                var target = $(this).attr('href');
                $('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
                    location.hash = target;
                });
                e.preventDefault();
            });

        });
    }
});

我如何扩展这个插件，以便它自动向下滚动到页面的部分（如果它的 URL 中存在 DOM 中的哈希值）？

我不太明白如何使用 window.location.hash 来实现这一点，尽管我不清楚将其添加到插件内部的最佳位置。

原文

I have wrote this simple plugin which smooth scrolls the browser window and adds the hash link to the URL.

$.fn.extend({
    scrollWindow: function(options) {
        var defaults = { duration: "slow", easing : "swing" }                 
        var options =  $.extend(defaults, options);
        return this.each(function() {             
            $(this).click(function(e) {
                var target = $(this).attr('href');
                $('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
                    location.hash = target;
                });
                e.preventDefault();
            });

        });
    }
});

How do I extend this plugin so that it auto scrolls down to the section of the page if it has a hash in the URL that exists in the DOM?

I half understand how this will work by using the window.location.hash, although I am unclear where is the best to add this inside of the plugin.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久光 2024-12-18 05:25:19

将函数存储在单独的变量中，如果哈希存在则调用该函数。我已经实现了您的请求，以便每次调用 $().scrollWindow 时都使用当前的 location.hash 。其他实现遵循相同的原则。

$.fn.extend({
    scrollWindow: function(options) {
        var defaults = { duration: "slow", easing : "swing" }                 
        var options =  $.extend(defaults, options);
        var goToHash = function(target){
            $('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
                location.hash = target;
            });
        };
        if(location.hash.length > 1) goToHash(location.hash);
        return this.each(function() {             
            $(this).click(function(e) {
                //Remove junk before the hash if the hash exists:
                var target = $(this).attr('href').replace('^([^#]+)#','#');
                goToHash(target);
                e.preventDefault();
            });

        });
    }
});

Store the function in a separate variable, and call the function if the hash is existent. I have implemented your request such that the current location.hash is used each time $().scrollWindow is invoked. Other implementations follow the same principle.

$.fn.extend({
    scrollWindow: function(options) {
        var defaults = { duration: "slow", easing : "swing" }                 
        var options =  $.extend(defaults, options);
        var goToHash = function(target){
            $('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
                location.hash = target;
            });
        };
        if(location.hash.length > 1) goToHash(location.hash);
        return this.each(function() {             
            $(this).click(function(e) {
                //Remove junk before the hash if the hash exists:
                var target = $(this).attr('href').replace('^([^#]+)#','#');
                goToHash(target);
                e.preventDefault();
            });

        });
    }
});

回复收藏 0 原文

~没有更多了~