Is there a more elegant way to write this in javascript?

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;
 });
});

I'm using that code to scroll to the bottom/top of the page. I'm wondering if there is a better way to write that? I'm new to jquery so I'm not sure but I've heard using event.preventDefault() may be better instead of return false ? If so, where would I insert that?

Answer 1

Sure:

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

How about just using a ternary to select the scroll? eg

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

JSFiddle for this code here

You could make this better by adding a class eg 'navButton' to each of these buttons and then using that as the selection ie $('.navButton') - This will eliminate the .add() call.

Also I'd recommend giving the bottom button the id bottom rather than button :) eg

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

Answer 3

Using a specialized plugin jquery.scrollTo .

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

Makes code nice and easy

$(function() {

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

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

});

Demo: http://jsfiddle.net/disfated/mkZp3/

---

Also if you want a more flexible code, you could do something like

$(function() {

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

});

Then, define scroll behaviour directly in html, example

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

Demo: http://jsfiddle.net/disfated/Sj8m7/

Answer 4

According to jQuery manual return false and preventDefault does different things:

Example: Cancel a default action and prevent it from bubbling up, return false:

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

Example: To cancel only the default action by using the preventDefault method.

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

So preventDefault is more limited.