Не нравятся результаты поиска? Попробуйте другой поиск!

Кнопка Вверх


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

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

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

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

Спасибо

Ответил: 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
4

408 | 191

Serik - 28 мая 2014 12:01 - Местный

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

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

Alien Brickman
5

Alien Brickman - 19 октября 2016 23:09 - Юзер

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

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

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

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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