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

是的，传递一些参数

参考此示例

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

除了问题之外，这对你的加载时间有影响，这里有另一种方法来设置这个东西，使用事件委托：

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

#start现已过时，具有data-scroll-target - 属性的每个节点都将具有此功能

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

https://jsfiddle.net/dsx8o04u/

在Jquery中创建可重用函数

3 个答案: