Question

$(function () {
 $('#button').click(function () {
     $('html, body').animate({
         scrollTop: $(document).height()
     },
     400);
     return false;
 });

 $('#top').click(function () {
     $('html, body').animate({
         scrollTop: '0px'
     },
     400);
     return false;
 });
});

我正在使用该代码滚动到页面的底部/顶部。我想知道是否有更好的方法来写这个？我是jquery的新手，所以我不确定，但我听说使用event.preventDefault()可能更好而不是return false？如果是这样，我会在哪里插入？

Answer 1

不确定

$(function() {
  var map = {'#button': $(document).height, '#top': '0px'};
  jQuery.each(map, function(k, v) {
     $(k).click(function() {
      $(document.body).animate({
         scrollTop:(typeof v === 'function') ? v() : v
      },
      400);
    });
  });
});

Answer 2

使用ternary选择滚动怎么样？例如

$(function () {
  $('#button').add('#top').click(function () {
     $('html, body').animate({
         scrollTop : ((this.id=='button') ? $(document).height() : '0px')
     },
     400);
     return false;
  });
});

JSFiddle for this code here

您可以通过向每个按钮添加一个类'navButton'，然后将其用作选择，即$('.navButton') - 这将消除.add()调用。

另外，我建议给底部按钮{id} bottom而不是button :)，例如

$(function () {
  $('.navButton').click(function () {
     $('html, body').animate({
         scrollTop : ((this.id=='bottom') ? $(document).height() : '0px')
     },
     400);
  });
});

Answer 3

根据jQuery手册返回false和preventDefault会做不同的事情：

示例：取消默认操作并阻止其冒泡，返回false：

$("a").live("click", function() { return false; })

示例：使用preventDefault方法仅取消默认操作。

$("a").live("click", function(event){
  event.preventDefault();
});

所以preventDefault更受限制。

Answer 4

使用专门的插件jquery.scrollTo。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>

使代码变得简单易用

$(function() {

$('#button').click(function() {
    $.scrollTo('max', 400);
    return false;
});

$('#top').click(function() {
    $.scrollTo(0, 400);
    return false;
});

});

演示：http://jsfiddle.net/disfated/mkZp3/

此外，如果您想要更灵活的代码，您可以执行类似

的操作

$(function() {

$(document).on('click', '[data-scroll]', function(e) {
    e.preventDefault();
    $.scrollTo($(this).data('scroll'), jQuery.fx.speeds._default);
});

});

然后，直接在html中定义滚动行为，例如

<button data-scroll="max">scroll to page bottom</button>
<button data-scroll="0">scroll to page top</button>
<button data-scroll="#my_selector">scroll to #my_selector element</button>

演示：http://jsfiddle.net/disfated/Sj8m7/

有没有更优雅的方式在javascript中写这个？

4 个答案: