Jqueryで再利用可能な関数を作成する

Question

このコードを頻繁に使用すると、ウェブサイトがゆっくり読み込まれます。

$('#start').click(function() { 
     $('html,body').animate({ 
      scrollTop : $('.scroll').offset().top 
     },1500);//end animate 
    });//end click 

私は#startと.scroll毎回を変更するために使用。任意のヒント？

Answer 1

関数でラップします。

function foo(startElem, scrollElem) { 
    $(startElem).click(function() { 
     $('html,body').animate({ 
      scrollTop : $(scrollElem).offset().top 
     },1500);//end animate 
    }); 
} 

それを必要に応じて呼び出します。

foo('#start', '.scroll'); 

続きを読むhere。

Answer 2

うん、これは本当にあなたのロード時間に影響を与えている天気を質問以外にもいくつかのパラメータ

に参照してください。この例

function scrollCommon(startElem, scrollElem) { 
 
    $(startElem).click(function() { 
 
     $('html,body').animate({ 
 
      scrollTop : $(scrollElem).offset().top 
 
     },1500);//end animate 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <ul> 
 
    <li><a href="#" onClick="scrollCommon($(this), '.one')" data-element="one">One</a></li> 
 
    <li><a href="#" onClick="scrollCommon($(this), '.two')" data-element="one">Two</a></li> 
 
    </ul> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    <div class="one"> 
 
    <b>One</b><br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br> 
 
    </div> 
 
    <div class="two"> 
 
    <b>Two</b> 
 
    <br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem<br> 
 
    </div> 
 
</div>

Answer 3

を渡してあり、ここでは別の方法は、設定しますイベントの委任を使用してこのことを行います：

$(document).on('click', '[data-scroll-target]', function(e){ 
    $('html,body').animate({ 
     scrollTop: $(this.dataset.scrollTarget).offset().top 
    }); 
}); 

#startが廃止となっている、data-scroll-target -attributeを持つすべてのノードが

<div data-scroll-target=".scroll">#start</div> 
... 
<div class="scroll"> target </div> 

https://jsfiddle.net/dsx8o04u/