Question

我创建了这个功能：

function go_to($valor) {
    var tamano = $valor.offset().top;
    tamano = tamano - 50;
            $('html, body').animate({
            scrollTop: tamano
            }, 2000);
        };

我从菜单中这样称呼它：

<ul class="right">
                <li><a onclick="go_to($('#section01'));">Section 01</a></li>
                <li><a onclick="go_to($('#section02'));">Section 02</a></li>
                <li><a onclick="go_to($('#section03'));">Section 03</a></li>
                <li><a onclick="go_to($('#section04'));">Section 04</a></li>
            </ul>

我的问题：还有其他更好的方法来调用onclick函数并发送其部分ID吗？

Answer 1

是的，您不应该使用侵入式JS，而是在标记之外声明事件处理程序：

<强> JS

$('.right a').click(function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $(this.href).offset().top - 50
  }, 2000);
});

<强> HTML

<ul class="right">
    <li><a href="#section01'">Section 01</a></li>
    <li><a href="#section02'">Section 02</a></li>
    <li><a href="#section03'">Section 03</a></li>
    <li><a href="#section04'">Section 04</a></li>
</ul>

Answer 2

试试这段代码：

<ul class="right">
   <li><a class="link">Section 01</a></li>
   <li><a class="link">Section 02</a></li>
</ul>
$(".link").click(function(){
   var tamano = $(this).offset().top;
   tamano = tamano - 50;
        $('html, body').animate({
        scrollTop: tamano
        }, 2000);
});

Answer 3

您必须将HTML更改为：

<ul class="right">
    <li><a href="#section01">Section 01</a></li>
    ...
</ul>

你的JS应该是

$('.right').on('click','a',function(e){

  e.preventDefault(); // prevent default click behavior

  var target = $(this).attr('href'); //assign value of a's 'href' to 'target'

  go_to(target); // use your function

});

你的功能应该是：

function go_to(valor) {
    var tamano = $(valor).offset().top;
    tamano = tamano - 50;
    $('html, body').animate({
        scrollTop: tamano
    }, 2000);
};

调用onClick函数的最佳方法是什么？

3 个答案: