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

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


     09.08.2011    Шаблоны (TPL)    11693

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

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


Да, отвечали в комментариях, но это было до переработки сайта и они не сохранились.
Собственно сама кнопка - это доработанный скрипт плавающей панели с соц.закладками, только без соцзакладок 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
36 | 31

papeion - 10 августа 2011 00:02 - Юзер

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

tatarnikov
7 | 7

tatarnikov - 24 августа 2011 19:43 - Юзер

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

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 24 августа 2011 20:16 - Админ

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

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

tatarnikov
7 | 7

tatarnikov - 25 августа 2011 01:08 - Юзер

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

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 25 августа 2011 07:28 - Админ

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

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

tatarnikov
7 | 7

tatarnikov - 25 августа 2011 14:24 - Юзер

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

pnul
17 | 17

pnul - 4 сентября 2011 18:47 - Юзер

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

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

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

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 4 сентября 2011 21:45 - Админ

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

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

pnul
17 | 17

pnul - 5 сентября 2011 01:11 - Юзер

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

Romario
25

11 | 11

Romario - 21 октября 2011 19:59 - Юзер

Хочу предложить свой вариант,работает во всех браузерах.
это в конец 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")})}});

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

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 21 октября 2011 20:05 - Админ

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

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

Romario
25

11 | 11

Romario - 21 октября 2011 20:13 - Юзер

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

Electric
8 | 8

Electric - 26 января 2012 01:06 - Юзер

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

Borchun
12 | 7

Borchun - 7 апреля 2012 05:08 - Юзер

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

Electric
8 | 8

Electric - 26 января 2012 01:48 - Юзер

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

NightFox71
1 | 1

NightFox71 - 10 апреля 2012 10:48 - Юзер

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

Mack
7 | 7

Mack - 25 ноября 2012 00:00 - Юзер

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

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 25 ноября 2012 00:04 - Админ

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

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

onlinehero
3

12 | 2

onlinehero - 24 августа 2015 13:50 - Юзер

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

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

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