Javascript up/down button

Question

Javascript up/down button

Good afternoon. Tell me how to implement a button on the site, when you click on it, the scroll on the site will go down, and when you click on it again, the scroll will go up. Example: www.magnatek.ru ( right on the main page there is a button "More about the company" )

I tried using toggleClass, but it didn't work, maybe I was doing it wrong.

1

English javascript

Author: htmlcoder, 2013-06-05

Source

2 answers

score 1 · Answer 1

UPD: http://jsfiddle.net/ut3rx/

The site from your example has everything:

<a href="#" class="more_about_company"><span class="more_about_companyi"></span></a>

function scrollToEl(elem){
    var num = elem.offset().top;
    $('html, body').animate({
        scrollTop: num
    }, 500);
};

function chooseScroll(elem, elemBottom){
    var curTop = $(document).scrollTop();
    var delimetr = curTop + ($(window).height()/2);
    var elemTopNum = elem.offset().top;
    if(delimetr < elemTopNum){
        scrollToEl(elemBottom);
    }
    else {
        scrollToScreen(elemBottom);
    }
}
 $('.more_about_company').on('click', function(){
    var elem = $(this);
    chooseScroll(elem, $('.more_about_company_wrap'));
    return false;
});

Or necessarily JavaScript?

score 0 · Answer 2

Perhaps it will be useful to someone. Wrote on javascript, without jQuery.

/* begin Up-Down button  */
(function() {
  'use strict';

  var upDownBtn = document.querySelector('.up_down_btn');
  var check;

  function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = document.documentElement.clientHeight;

    if (scrolled > coords) {
      upDownBtn.classList.add('up_down_btn-show');
      upDownBtn.innerHTML = '&uarr;';
      upDownBtn.setAttribute('title', 'Наверх');
      check = false;
    }
    if (scrolled === 0) {
      upDownBtn.innerHTML = '&darr;';
      upDownBtn.setAttribute('title', 'Вниз');
      check = true;
    }
  }

  function backToTop() {
    upDownBtn.classList.add('up_down_btn-disabled');
    if (!check) {
      (function goTop() {

        if (window.pageYOffset !== 0) {
          window.scrollBy(0, -80);
          setTimeout(goTop, 0);
        } else {
          upDownBtn.classList.remove('up_down_btn-disabled');
        }

      })();
      return;

    } else if (check) {
      (function goBottom() {
        var match = Math.ceil(window.pageYOffset + document.documentElement.clientHeight);

        if (match != document.documentElement.scrollHeight) {
          window.scrollBy(0, 80);
          setTimeout(goBottom, 0);
        } else {
          upDownBtn.classList.remove('up_down_btn-disabled');
        }

      })();
      return;
    }

  }

  window.addEventListener('scroll', trackScroll);
  upDownBtn.addEventListener('click', backToTop);
})();
/* end Up-Down button  */

h1 {
  text-align: center;
}

.matrix {
  width: 400px;
  margin: auto;
  text-align: justify;
}


/* begin Up-Down button  */

.up_down_btn {
  position: fixed;
  bottom: 80px;
  right: 40px;
  z-index: 9999;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}

.up_down_btn:hover {
  text-decoration: none;
  background: #e9ebec;
}

.up_down_btn-show {
  display: block;
}

.up_down_btn-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0;
}


/* end Up-Down button  */

<h1>Scroll down</h1>
<div class="matrix">
  <script>
    for (var i = 0; i < 4000; i++) document.writeln(i)
  </script>
</div>
<!-- begin Up-Down button -->
<a class="up_down_btn" title="Наверх">&uarr;</a>
<!-- end Up-Down button -->

*For use, take only the code that is inside the comments (begin/end), the rest here is just for demonstration.