Click on the arrow to scroll to the next section to the banner.

scrollToNextSection.css

/* Additional Styling */
#bottom-arrow {
	position: absolute;
	width: 52px; /* Width of arrow image */
	height: 32px; /* Height of arrow image */
	left: 50%;
	margin-left: -26px; /* Horizontally centered, should be half of the 'width' */
	background: url(path/to/arrow/file.png) no-repeat center center;
	z-index: 10;
	text-indent: -9999px; /* To visually hide the text inside the button */
}

#bottom-arrow:hover {
	opacity: 0.8;
}

scrollToNextSection.html

<a href="#" id="bottom-arrow"><span>Scroll to Next Section</span></a>

scrollToNextSection.js

/**
 * Scroll to Next Section Button
 * 
 * Author: Zeshan Ahmed
 * Author URI: http://www.zeshanahmed.com/
 */
jQuery(document).ready(function($) {

  var $win = $(window),
    $arrow = $('#bottom-arrow'),
    $header = $('#header'), // Header selector
    $banner = $('.banner'); // Banner selector

  function bottomArrowPosition() {

    if ($arrow.length) {

      var headerH = $header.outerHeight(),
        bannerH = $banner.outerHeight(),
        arrowH = $arrow.outerHeight(),
        top = bannerH - arrowH - 50;

      $arrow.css('top', top);

      $arrow.off('click');
      $arrow.click(function(e) {

        e.preventDefault();

        var $this = $(this),
          $sec = $banner.next();

        if ($sec.attr('id') == 'bottom-arrow') {
          $sec = $sec.next();
        }

        console.log($sec.offset().top);

        $('html, body').animate({
          scrollTop: $sec.offset().top
        }, 300);

      });

    }

  }

  $win.ready(bottomArrowPosition).resize(bottomArrowPosition);

  $win.load(function() {

    bottomArrowPosition();
    setTimeout(function() {
      bottomArrowPosition();
    }, 500);

  });

});