So I have been making onepage websites for a while now, and one thing witch is always annoys me is navigation functions witch i'm repeating for the amount of buttons and id's I have.

It looks like the following:

$('#homeB').click(function () {
    $('html, body').animate({
      scrollTop: $("#home").offset().top
    }, 1000);
    return false;
  });
  $("#aboutB").click(function() {
    $('html, body').animate({
      scrollTop: $("#about").offset().top
    }, 1000);
    return false;
  });
  $("#winesB").click(function() {
    $('html, body').animate({
      scrollTop: $("#wines").offset().top
    }, 1000);
    return false;
  });

Question is, how do I change from here to a small function that does not need repeating.

Thanks.

Note: Preferably no 3rd party plugins etc. keep it in JavaScript/jQuery.

So I have been making onepage websites for a while now, and one thing witch is always annoys me is navigation functions witch i'm repeating for the amount of buttons and id's I have.

It looks like the following:

$('#homeB').click(function () {
    $('html, body').animate({
      scrollTop: $("#home").offset().top
    }, 1000);
    return false;
  });
  $("#aboutB").click(function() {
    $('html, body').animate({
      scrollTop: $("#about").offset().top
    }, 1000);
    return false;
  });
  $("#winesB").click(function() {
    $('html, body').animate({
      scrollTop: $("#wines").offset().top
    }, 1000);
    return false;
  });

Question is, how do I change from here to a small function that does not need repeating.

Thanks.

Note: Preferably no 3rd party plugins etc. keep it in JavaScript/jQuery.

• javascript
• jquery

• 1 Just use JQuery class selector instead of id based. So that you have to wrote only once. – Yogen Darji Commented Jul 26, 2017 at 16:49

3 Answers 3

function scrollTo($element) {
    $('html, body').animate({
      scrollTop: $element.offset().top
    }, 1000);
    return false;
}

then you can use it as

$('#homeB').click(function () {
   scrollTo($("#home"));
});
$("#aboutB").click(function() {
  scrollTo($("#about"));
});
$("#winesB").click(function() {
  scrollTo($("#wines"));
});

To avoid writing duplicate code, you could do a little something like this:

$(function() {
  $('li').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(e.target).attr("href")).offset().top
    }, 1000);
  });
});

nav {
  position: fixed;
  top: 0;
  left: 0;
}

div {
  margin: 100px 0 0 0; 
  width: 100%;
  height: 500px;
}

div:nth-child(even) {
  background: #ccc;
}

div:nth-child(odd) {
  background: #4c4c4c;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</nav>

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>

There are a couple ways of tackling this. If I were to be doing it, I would make whatever is being clicked a class and then setting a data attribute to the destination id, like this

<span class='nav_link' data-dest='home2'>Click me to go to home 2</span>

Then you could do something like this

$('.nav_link').click(function() {
    var dest = $(this).attr('data-dest');
    $('html, body').animate({
      scrollTop: $('#'+dest).offset().top
    }, 1000);
})