Кнопка Наверх страницы Scroll to top

<<

aldous

Аватара пользователя

Автор темы

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 21 июн 2011, 00:24

Кнопка Наверх страницы Scroll to top

Кнопка вверх на jquery, появляется только при прокрутке вниз.

Вставить до тега (если раньше не стояло) </head>:

  Код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>


И вслед за ним основной код:

  Код:
<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:89px;height:140px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-mHqnd03atLU/Tf92esR2s_I/AAAAAAAAFjY/cUQ90G6P_FQ/s320/naverh1.gif) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-mHqnd03atLU/Tf92esR2s_I/AAAAAAAAFjY/cUQ90G6P_FQ/s320/naverh1.gif) no-repeat left -51px;width:89px;height:140px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); });
</script>


Где обе ссылки http://2.bp.blogspot.com/-mHqnd03atLU/Tf92esR2s_I/AAAAAAAAFjY/cUQ90G6P_FQ/s320/naverh1.gif - это рисунок кнопки (нормально и при наведении), а width:89px;height:140px - размер кнопки (аналогично).
В #w2btoTopHover прописан небольшой сдвиг.
Последний раз редактировалось Admin 21 июн 2011, 02:13, всего редактировалось 1 раз.
<<

sv9t

Аватара пользователя

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 21 июн 2011, 00:36

Re: Scroll to top

У меня чуток по другому: это после <body>
  Код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<div class='scrollTop' style='display:none;'>
<script type='text/javascript'>
(function($){

  /* ------------------------------------------------- */
  $(function(){
    var e = $(&quot;.scrollTop&quot;);
    var  speed = 500;

    e.click(function(){
      $(&quot;html:not(:animated)&quot; +( !$.browser.opera ? &quot;,body:not(:animated)&quot; : &quot;&quot;)).animate({ scrollTop: 0}, 500 );
      return false; //важно!
    });
    function show_scrollTop(){
      ( $(window).scrollTop()&gt;300 ) ? e.fadeIn(600) : e.hide();
    }
    $(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
  });

})(jQuery)
</script> </div>


а перед ]]></b:skin> прописать:
  Код:
/* Кнопка вверх */

.scrollTop {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://ВАША КНОПКА");
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: auto;
bottom: 0px;
cursor: pointer;
display: block;
height: 40px;
left: 47%;
opacity: 0.6;
position: fixed;
width: 61px;
z-index: 2000;
}


Вроде робит! :) Она будет посередине и внизу.

Добавлено спустя 10 минут 28 секунд:
Заметил у aldous более мягче останавливается, притормаживает когда ближе к шапке блога "подлетаешь". А у меня просто, вверх, без приостановки. Надо будет покопаться в чем загвоздка.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

AkiRo

Аватара пользователя

Сообщения: 38

Зарегистрирован: 05 май 2011, 12:07

Откуда: Ukraine

Благодарил (а): 1 раз.
Поблагодарили: 3 раз.

Сообщение 02 авг 2011, 13:55

Re: Кнопка Наверх страницы Scroll to top

Привет всем.
Сделал кнопку скроллинга по первому типу (так как во втором нельзя выбирать две картинки начальная и при наведении), но столкнулся с проблемой. Когда вставляю выше-описанные коды, то перестает работать вот этот верхний слайдер.

3444.jpg


1 - нужно давать код слайдера? может там что-то можно исправить?
2 - можно ли во втором способе сделать 2-картиночную версию?
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Alive Songs. Ru - блог про музыку - http://www.alive-songs.ru/
<<

aldous

Аватара пользователя

Автор темы

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 авг 2011, 14:10

Re: Кнопка Наверх страницы Scroll to top

jquery какая стоит? у меня с 1.6 не всё дружит
<<

AkiRo

Аватара пользователя

Сообщения: 38

Зарегистрирован: 05 май 2011, 12:07

Откуда: Ukraine

Благодарил (а): 1 раз.
Поблагодарили: 3 раз.

Сообщение 02 авг 2011, 14:52

Re: Кнопка Наверх страницы Scroll to top

А как это узнать?
Alive Songs. Ru - блог про музыку - http://www.alive-songs.ru/
<<

aldous

Аватара пользователя

Автор темы

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 авг 2011, 15:27

Re: Кнопка Наверх страницы Scroll to top

Я сейчас вообще ссылку на эту библиотеку не нахожу, зато нахожу другую. Это слайдер постов mootools?
Последний раз редактировалось aldous 02 авг 2011, 15:39, всего редактировалось 1 раз.
<<

AkiRo

Аватара пользователя

Сообщения: 38

Зарегистрирован: 05 май 2011, 12:07

Откуда: Ukraine

Благодарил (а): 1 раз.
Поблагодарили: 3 раз.

Сообщение 02 авг 2011, 17:36

Re: Кнопка Наверх страницы Scroll to top

Ну этот элемент называется Featured Content Slider. И он по ходу насколько помню, на mootools.
Alive Songs. Ru - блог про музыку - http://www.alive-songs.ru/
<<

aldous

Аватара пользователя

Автор темы

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 авг 2011, 17:55

Re: Кнопка Наверх страницы Scroll to top

mootools и jquery почти всегда конфликтуют, мне видятся два пути:
либо попытаться их подружить, либо использовать что-то одно. Scroll to top можно найти для mootools.
<<

Lev Kaplya

Аватара пользователя

Сообщения: 102

Зарегистрирован: 09 май 2011, 12:28

Откуда: Санкт-Петербург

Благодарил (а): 13 раз.
Поблагодарили: 0 раз.

Сообщение 21 дек 2011, 01:16

Re: Scroll to top

sv9t писал(а):У меня чуток по другому: это после <body>
  Код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<div class='scrollTop' style='display:none;'>
<script type='text/javascript'>
(function($){

  /* ------------------------------------------------- */
  $(function(){
    var e = $(&quot;.scrollTop&quot;);
    var  speed = 500;

    e.click(function(){
      $(&quot;html:not(:animated)&quot; +( !$.browser.opera ? &quot;,body:not(:animated)&quot; : &quot;&quot;)).animate({ scrollTop: 0}, 500 );
      return false; //важно!
    });
    function show_scrollTop(){
      ( $(window).scrollTop()&gt;300 ) ? e.fadeIn(600) : e.hide();
    }
    $(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
  });

})(jQuery)
</script> </div>


а перед ]]></b:skin> прописать:
  Код:
/* Кнопка вверх */

.scrollTop {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://ВАША КНОПКА");
background-origin: padding-box;
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: auto;
bottom: 0px;
cursor: pointer;
display: block;
height: 40px;
left: 47%;
opacity: 0.6;
position: fixed;
width: 61px;
z-index: 2000;
}


Вроде робит! :) Она будет посередине и внизу.

Добавлено спустя 10 минут 28 секунд:
Заметил у aldous более мягче останавливается, притормаживает когда ближе к шапке блога "подлетаешь". А у меня просто, вверх, без приостановки. Надо будет покопаться в чем загвоздка.


Привет! Подскажи пжл, <body> где должен быть? Я его почему-то не могу найти в шаблоне :( . В конце шаблона нашел </body>, а <body> не находится :crazy:
Школа Электронного Бизнеса
Все об Инвестициях и Бизнесе в Интернете
<<

sv9t

Аватара пользователя

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 21 дек 2011, 06:49

Re: Scroll to top

Lev Kaplya писал(а):Привет! Подскажи пжл, <body> где должен быть? Я его почему-то не могу найти в шаблоне :( . В конце шаблона нашел </body>, а <body> не находится :crazy:

Привет! должен быть, без него никуда. Найди где находится </head> и посмотри далее визуально(а не через поиск), после него должен быть <body> практически сразу. Не знаю, может видоизменен он у тебя... если и так, в поиске ctrl+F вбей "<body" (без кавычек).
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
След.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: нет зарегистрированных пользователей

cron
Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo