Кнопка "прокрутити на місце читання", як в VK

Ключова суть така: є 2 інтерактивні елементи — кнопки вниз та вгору. Клік на кнопку вгору крім самого прокручування буде записувати значення скільки пікселів прокрутили в спеціальну змінну scr, наприклад:

var scrTop = jQuery( "#scrolltop" );
var scrDown= jQuery( "#scrolldown" );
var scr = 0;
scrTop.click(function(){
       scr = pBody.scrollTop(); 
       pBody.animate( { scrollTop: 0 }, 300 );
});

А кнопка вниз, як ви вже здогадалися, прокрутить на значення записане в цій же змінній scr

 scrDown.click(function(){
     pBody.animate( { scrollTop: scr}, 300 ); 
 });

Можна також приховувати елементи,які недоцільні в певні моменти, класом hide, який має властивість display: none;. Таким чином можна добитися ефекту присутності однієї кнопки і її зміни при натисканні:

       scrDown.removeClass('hide');
       scrTop.addClass('hide');

Приклад реалізованої кнопки можна побачити на всіх сторінках цього сайту.

Кінцевий код з оформленням кнопок, приховуванням зверху сторінки, платформонезалежністю, тощо буде виглядати так:

<div id="scrollbuttons" class="scrollbuttons hidden-xs hidden-sm"> 
  <div  id="scrolltop" class="scrolltop hide" >
     <i class="fa fa-angle-up"></i>
   </div>
   <div id="scrolldown" class="scrolldown hide"  >
     <i class="fa fa-angle-down"></i>
   </div>
</div>

<style>
.scrollbuttons{
  position: fixed;
  left: 25px;
  bottom: 100px;
}
.scrolltop,.scrolldown{
  background: #95D0FE;
  background: rgba(149, 208, 254, 0.7);
  width: 35px;
  height: 35px;
  border-radius: 4px; -webkit-border-radius: 4px; - moz-border-radius: 4px;
  margin-bottom: 15px;
  padding: 0;
  opacity: 0.5;
  text-align: center;
  cursor: pointer;
}
.scrolltop:hover, .scrolltop:focus,.scrolldown:hover, .scrolldown:focus{
 opacity: 1;
}
.scrollbuttons i{
 font-size: 30px;
 line-height: 35px;
 color: #fff;
}
</style>

<script> jQuery(document).ready(function() {
var scrTop = jQuery( "#scrolltop" );
var scrDown= jQuery( "#scrolldown" );
var scr = 0;
if(jQuery.browser.safari){
    var pBody =  jQuery('body'); 
}else{
    var pBody =  jQuery('html,body');
}
jQuery(window).scroll(function () {
var scrVal = jQuery(window).scrollTop(); 
 if (scrVal > 200) {
     scrTop.removeClass('hide');  
     scrDown.addClass('hide');
 } 
 else {
     scrTop.addClass('hide');
    if (scr !=0) { scrDown.removeClass('hide');  }
 };
});

scrTop.click(function(){
       scr = pBody.scrollTop(); 
       pBody.animate( { scrollTop: 0 }, 300 );
       scrDown.removeClass('hide');
       scrTop.addClass('hide');
});

scrDown.click(function(){
     pBody.animate( { scrollTop: scr}, 300 ); 
     scrDown.addClass('hide');
});

});</script>

Я ще зробив модуль для Joomla, але поділюся по запиту, або коли буде готове місце куди його опублікувати.