Добавляем кнопку возврата наверх страницы

[xenforomen]

Добрый день!
Модификация, добавляющая кнопку возврата наверх страницы.
Открывает шаблон footer и находим код:

<li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
        
            <span class="helper"></span>
        </div>
    </div>

Ниже добавляем код:

<script type="text/javascript">
jQuery(document).ready(function() {
  var scrollToTop = '#scrollToTop';
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 200) {
      jQuery(scrollToTop).fadeIn();
    } else {
      jQuery(scrollToTop).fadeOut();
    }
  });
  jQuery(scrollToTop).click(function() {
    jQuery('html, body').animate({
      scrollTop: 0
    }, 60);
    return false;
  });
});
</script>
<div id="scrollToTop" class="scrollToTop scrollToTop_block" style="display: none;">
  <a title="Наверх" href="#">
    ↑
  </a>
</div>

Открываем шаблон EXTRA.css вставляем в любое место CSS-код:

/*-- Scroll To Top - Template --*/
.scrollToTop {
  position: fixed;
  z-index: 500;
  display: none;
  line-height: normal;
}

.scrollToTop a {
  display: block;
  border: none;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  opacity: .3;
}

.scrollToTop a:hover {
  background: #000;
  text-decoration: none;
}

.scrollToTop.scrollToTop_block {
  right: 10px;
  bottom: 10px;
}

.scrollToTop.scrollToTop_block a {
  padding: 10px 15px;
  border-radius: 3px;
  background: #000;
  color: #fff;
}

.scrollToTop.scrollToTop_block a:hover {
  opacity: .6;
}
/*-- / Scroll To Top - Template --*/

Теперь можно удалить ссылку "вверх" из подвала, открываем шаблон footer и удаляем строчку с кодом:

<li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>

После несложных манипуляций, кнопка будет появляться при прокрутке страницы вниз

 

[Makoc]

А можно изменить положение этой копки, а то она закрывает счетчик, не очень удобно. Мне бы ее немного повыше поставить

 

[Hope]

Вот тут значения меняйте на нужные:

.scrollToTop.scrollToTop_block {
  right: 10px;
  bottom: 10px;
}

.scrollToTop.scrollToTop_block a {
  padding: 10px 15px;
  border-radius: 3px;
  background: #000;
  color: #fff;
}

 

[Makoc]

.scrollToTop.scrollToTop_block {
  right: 10px;
  bottom: 10px;
}

Спасибо, эти 2 параметра определяют местоположение

 

[andreloster]

А можно ли усовершенствовать скрипт, чтобы когда пользователь нажал на эту кнопку, то он бы смог переместиться наверх, но она бы также показывалась, чтобы переместиться опять к тому месту, откуда мы ее нажали (т.е. вниз к элементу)?

 

[viktor6]

Ребята как можно поставить эту кнопку

 

[Mirovinger]

Держите проверяйте.