jQuery scrollTop URLがハッシュの場合

Question

スムーズにブラウザウィンドウをスクロールし、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(); 
      }); 

     }); 
    } 
}); 

は、どのように私はそれがDOMに存在するURL内のハッシュを持っている場合は、ページのセクションにダウンしているので、オートスクロールこのプラグインを拡張していますか？

window.location.hashを使用するとどのように動作するのか分かりますが、プラグインの内側にこれを追加するのが最適な場所はどこかわかりません。

Answer 1

関数を別の変数に格納し、ハッシュが存在する場合は関数を呼び出します。 $().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(); 
      }); 

     }); 
    } 
});