Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы » Кнопка Вверх

Кнопка Вверх


     Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), jQuery, Модули, Хаки, Ламерские вопросы    4715

вопрос
Добрый день,

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

Пожалуйста объясните доходчиво))) Что и куда вставлять....

Спасибо

Ответил: D0Gmatist


В main.tpl после тега {AJAX}
<div class="ScrollTop">
<p id="back-top" style="display: block;">
  <a href="#top" class="ScrollTopUrl1">
   <span class="SpritAll">наверх</span>
  </a>
  <a href="#top" class="ScrollTopUrl2"></a>
</p>
</div>
В любой JS в шаблоне в самый конец
/***** Кнопка прокрутки в верх *****/
$(document).ready(function(){
    $("#back-top").hide();
        $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 150) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });
});
В styles.css
/** Скролл в верх **/
.ScrollTop{position:fixed;z-index:1000;}
@media (min-width:1227px) {.ScrollTop{top:0;left:0;bottom:0;width:110px;}}
.ScrollTop #back-top{overflow:hidden;top:10px;left:10px;position:relative;width:27px;height:27px;background:#f60;}
.ScrollTop:hover #back-top{width:100px;}
.ScrollTop #back-top .ScrollTopUrl1{display:block;width:58px;height:24px;padding:3px 0 0 42px;background-image:url(../images/arroy.png) no-repeat 0 0;text-decoration:none;z-index:100;position:relative;}
.ScrollTop #back-top .ScrollTopUrl1 span{color:#fff;line-height:18px;text-decoration:none;}
.ScrollTop .ScrollTopUrl2{position:fixed;top:0;left:0;bottom:0;width:110px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;}
.ScrollTop:hover .ScrollTopUrl2{background:rgba(158,158,158,0.25);}
@media (max-width:1226px) {.ScrollTopUrl2{display:none}}
где
@media (max-width:1226px) {.ScrollTopUrl2{display:none}}
а именно 1226px это размер вашего блока сайта .. это сделано для того что бы при изменении ширины браузера кнопка скрола не мешалась.

2 комментария

Serik
Местный

Serik - -

http://alaev.info/blog/post/4381

СПАСИБО надо тыкать в кнопку!

Alien Brickman
Юзер

Alien Brickman - -

Может кому-то пригодится.

Вместо:
no-repeat 0 0;

Поставил:
; background-repeat:no-repeat;

Тогда появилась иконка

Похожие вопросы

наверх