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

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

Плавающая кнопка вверх


     кнопка, верстка    Все вопросы » Шаблоны (TPL)    15787

вопрос
Как сделать такуюже как на вашем сайте, плавающую кнопку "наверх".
Говорят, что где-то уже отвечали, но я не нашёл.

Ответил: ПафНутиЙ


Да, отвечали в комментариях, но это было до переработки сайта и они не сохранились.
Собственно сама кнопка - это доработанный скрипт плавающей панели с соц.закладками, только без соцзакладок smile

Вставляем это в любой js-файл, можно в начало, можно в конец, как душе угодно:
$(function () {
/*Блок-кнопка для перехода к верху страницы*/

    var m1 = 310; // расстояние от начала страницы до плавающей панели
    var m2 = 300; //расстояние от верха видимой области страницы до плавающей панели (должно быть меньше чем m1)

    $("#wrapper").append('<div id="gotop"><a href="#"/></a></div>');
    var s = $('#gotop');
    s.css({top: m1}).hide();
    function margin() {
        var top = $(window).scrollTop();
        if (top+m2 < m1) {
            s.css({top: m1-top}).fadeOut(400);
        } else {
            s.css({top: m2}).fadeIn(400);
            s.find('a').css({opacity: 0.8});
        }
    }
    $(window).scroll(function() { margin(); })

    s.hover(
        function() { $(this).find('a').css({opacity: 1}); },
        function() { $(this).find('a').css({opacity: 0.8}); }
    );//конец блока перехода к началу страницы
    
});

где #wrapper - это блок, после которого будет вставлен код кнопки.

Теперь CSS
#gotop {
    position: fixed;
    z-index: 1000;
    margin-left: 995px; /*позиция блока с кнопкой*/
    }
    #gotop a {
        display: block;
        width: 41px;
        height: 40px;
        background: url(../images/upto.png) no-repeat center center; /*нужная картинка*/
        }

Вот собственно и всё.

19 комментариев

papeion
Юзер

papeion - -

Спасибо ). Буду юзать laughing .

tatarnikov
Юзер

tatarnikov - -

Всем привет
Что то у меня не получается, кнопку не видно
Все сделал как написано выше
DLE 9.3
Единственное не понял что с этим делоть
где #wrapper - это блок, после которого будет вставлен код кнопки.

ПафНутиЙ
Админ

ПафНутиЙ - -

Что не понятно?
Как прописать свой id блока на сайте?
Она и не появится, пока не найдёт на странице id к которому привязана

Каков вопрос - таков и ответ. Просто помните об этом.

tatarnikov
Юзер

tatarnikov - -

Да насчет ID и каково блока

ПафНутиЙ
Админ

ПафНутиЙ - -

Вообще я задал риторический вопрос.... но если настолько все для вас дложно: объясняю детально:
в строке
$("#wrapper").append('<div id="gotop"><a href="#"/></a></div>');
скрипта меняем слово wrapper (которое обозначает наименование идентификатора блока, после которого (по коду страницы) будет вставляться кнопка перехода наверх) на своё слово, при этом это слово должно встречаться у вас на сайте в виде id="слово"
Вообще это как бы элементарные вещи, не понимаю чего вы не понимаете.

Каков вопрос - таков и ответ. Просто помните об этом.

tatarnikov
Юзер

tatarnikov - -

ПафНутиЙ,
Все нормально просто я тут туплю немного smile
Спасибо

pnul
Юзер

pnul - -

Все сделал как написано. На главной показывает все ок, а на внутренних (у них другой шаблон и css) кнопка проваливается под футер, а не висит сбоку.

Не совсем догоняю в чем проблема. В стилях этого шаба все указано, все скобки на местах... JS общий с главной...

Намекните где облажался?!

ПафНутиЙ
Админ

ПафНутиЙ - -

думаю косяк в вёрстке - смотрите через дебаггеры сайт.

Каков вопрос - таков и ответ. Просто помните об этом.

pnul
Юзер

pnul - -

ПафНутиЙ,
Подскажите дебаггер пожалуйста. А если вручную искать, то на что обратить внимание?

Romario
Юзер

Romario - -

Хочу предложить свой вариант,работает во всех браузерах.
это в конец main.tpl
 <!-- прокрутка Top-->
<a href="#" id="toTop"><img src="{THEME}/images/up_arrow.png" border="0" align="absmiddle" /></a>
  <script src="{THEME}/js/ttop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>
<style>
#toTop {
width: 50px;
height: 50px;    
text-align: center;
padding: 5px;
position: fixed;
bottom: 50px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;
}
</style>
<!-- / прокрутка Top end-->


картинку со стрелкой в папку с картинками ,делаем свою под дизайн сайта {THEME}/images/up_arrow.png

далее создаем ttop.js и кидаем этот код

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

скрипт в папку со скриптами в шаблоне .все пользуйтесь

ПафНутиЙ
Админ

ПафНутиЙ - -

разница лишь в размерах скрипта)))

Каков вопрос - таков и ответ. Просто помните об этом.

Romario
Юзер

Romario - -

я выложил как вариант,сам скрипты не пишу,пусть люди порадуются выбором.
Никогда не поздно стать хорошим.

Electric
Юзер

Electric - -

Как сделать вариант с переходом вниз?

Borchun
Юзер

Borchun - -

подцепить кнопку к id футера или комментов. Главное чтобы блок был с id а не class

Electric
Юзер

Electric - -

***Комментарий удален***

NightFox71
Юзер

NightFox71 - -

Скажите, вот ваша кнопка приклеена к блоку контента, у меня же все заработало, но ее левый маржин ориентируется на край монитора!!! При разных разрешениях и даже если просто изменить размер окна - кнопка отлетает от блока контента, она четко висит на своих координатах по монитору. Как исправить?

Mack
Юзер

Mack - -

Спасибо за второй способ! Работает 100%
Но вот при установки первого у меня возникла проблема: появилась горизонтальная полоса прокрутки с размерами в 300px. Весь этот код снес но отступ так и остался. Подскажите как быть?

ПафНутиЙ
Админ

ПафНутиЙ - -

либо не до конца снесли, либо оно так изначально и было.
Попробуйте добавть родительскому элеенту overflow: hidden

Каков вопрос - таков и ответ. Просто помните об этом.

onlinehero
Юзер

onlinehero - -

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

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

наверх