jQuery scrollTop, если URL имеет хеш - PullRequest
1 голос
/ 23 октября 2011

Я написал этот простой плагин, который плавно прокручивает окно браузера и добавляет хеш-ссылку к 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, хотя мне неясно, где лучше всего добавить это внутри плагина.

1 Ответ

3 голосов
/ 23 октября 2011

Сохраните функцию в отдельной переменной и вызовите функцию, если хеш существует. Я выполнил ваш запрос так, что текущий location.hash используется каждый раз, когда $().scrollWindow вызывается. Другие реализации следуют тому же принципу.

$.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();
            });

        });
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...