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

<<

aldous

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

Кнопка вверх на 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 20 июн 2011, 22:13, всего редактировалось 1 раз.
<<

sv9t

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

У меня чуток по другому: это после <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 более мягче останавливается, притормаживает когда ближе к шапке блога "подлетаешь". А у меня просто, вверх, без приостановки. Надо будет покопаться в чем загвоздка.
<<

AkiRo

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

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



1 - нужно давать код слайдера? может там что-то можно исправить?
2 - можно ли во втором способе сделать 2-картиночную версию?
<<

aldous

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

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

AkiRo

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

А как это узнать?
<<

aldous

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

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

AkiRo

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

Ну этот элемент называется Featured Content Slider. И он по ходу насколько помню, на mootools.
<<

aldous

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

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

Lev Kaplya

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

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

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

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

Привет! должен быть, без него никуда. Найди где находится </head> и посмотри далее визуально(а не через поиск), после него должен быть <body> практически сразу. Не знаю, может видоизменен он у тебя... если и так, в поиске ctrl+F вбей "<body" (без кавычек).

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

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