Форум Сайтостроение Веб-строительство

Скрипт прокрутки вверх

12
B
На сайте с 14.01.2013
Offline
12
babanovao
1209

Здравствуйте! На данный момент у меня стоит кнопка прокрутки страницы "вверх". Когда прокручиваешь страницу вниз на определенное кол-во пикселей - слева на всю длину экрана появляется блок белого цвета с прозрачностью 0, то есть его не видно, но когда наводишь на него мышку - он приобретает прозрачность 0.1% и становится его видно, при нажатии страница прокручивается вверх.

Как добавить текст на этот блок, чтобы он был постоянно виден?

На данный момент при наведении мышки у меня так:

А нужно сделать, чтобы всегда был текст или картинка:

При наведении мышки картинка не исчезала, не меняла прозрачность, ничего чтобы не происходило, а просто сзади появлялся этот блок, который сейчас есть, вот так:

На данный момент у меня так:

.pageScroller {border-top:0px solid #d9d9d9;box-shadow:inset 0 1px 0 0 #fff;}
.pageScroller a {background:#fff; opacity: 0;display:block;width:88px;height:100%;text-indent:-999px;outline:none; position:fixed; left:0px; bottom: 1px; z-index:9998;}
.pageScroller a:hover {background-color:#fff; opacity: 0.1}

main.tpl

<div class="pageScroller">
<a id="tooTop" href="#page"></a>
</div>
G0
На сайте с 10.08.2013
Offline
12
Gug007
#1

В вашем случае не может быть отображена надпись, вы сами задали 100% прозрачность.

Нужно добавить еще один блок который будет отвечать за полупрозрачность. 


<div class="pageScroller">

 <div class="optScroller"></div>

 <a id="tooTop" href="#page"></a>

</div>
B
На сайте с 14.01.2013
Offline
12
babanovao
#2
Gug007:
В вашем случае не может быть отображена надпись, вы сами задали 100% прозрачность.
Нужно добавить еще один блок который будет отвечать за полупрозрачность. 

<div class="pageScroller">

 <div class="optScroller"></div>

 <a id="tooTop" href="#page"></a>

</div>

А в css писать что?

TF-Studio
На сайте с 17.08.2010
Offline
334
TF-Studio
#3

На любом сайте где нарвится возьмите и заберите код.

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
GA
На сайте с 16.06.2013
Offline
61
Green arrow
#4
TF-Studio:
На любом сайте где нарвится возьмите и заберите код.

не хорошо конечно, но и то правда. вот у ВК такая фигня реализована

G0
На сайте с 10.08.2013
Offline
12
Gug007
#5
babanovao:
А в css писать что?


.pageScroller {border-top:0px solid #d9d9d9;box-shadow:inset 0 1px 0 0 #fff;}

.optScroller {background:#fff; opacity: 0;width:88px;height:100%;position:fixed; left:0px; bottom: 1px; z-index:99;}

.optScroller:hover {background-color:#fff; opacity: 0.5}

#tooTop{display:block;outline:none;position:fixed;z-index:100;}
TitanIKS
На сайте с 25.01.2013
Offline
46
TitanIKS
#6

Нод блочит данную страницу - чеэто

B
На сайте с 14.01.2013
Offline
12
babanovao
#7
TitanIKS:
Нод блочит данную страницу - чеэто

Вот почему? Сколько код смотрел, проверял антивирусами - все нормально. Нод блочит, уже не первый человек говорит..

---------- Добавлено 24.03.2014 в 00:39 ----------

Gug007:

.pageScroller {border-top:0px solid #d9d9d9;box-shadow:inset 0 1px 0 0 #fff;}
.optScroller {background:#fff; opacity: 0;width:88px;height:100%;position:fixed; left:0px; bottom: 1px; z-index:99;}
.optScroller:hover {background-color:#fff; opacity: 0.5}
#tooTop{display:block;outline:none;position:fixed;z-index:100;}

Прописал, нужно теперь как то вставить картинку ровно в середину этого блока.. чтобы картинка была постоянно одним цветом, ничего не менялось..

Как сэкономить 3 000 Яндекс.Директ обновил конструктор креативов AdSense улучшил автоматизированные объявления
G0
На сайте с 10.08.2013
Offline
12
Gug007
#8
babanovao:

Прописал, нужно теперь как то вставить картинку ровно в середину этого блока.. чтобы картинка была постоянно одним цветом, ничего не менялось..

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

B
На сайте с 14.01.2013
Offline
12
babanovao
#9
Gug007:
Вставьте в ссылку изображение и стилями позиционируйте куда вам нужно.

Не работает.

Вставил так:

<div class="pageScroller">
<div class="optScroller"> <div class="knpk"> <img src="{THEME}/images/up.png"></div> </div>
<a id="tooTop" href="#page"></a>
</div>

в css прописал:

.pageScroller {border-top:0px solid #d9d9d9;box-shadow:inset 0 1px 0 0 #fff;}
.optScroller {background:#fff; opacity: 0;width:88px;height:100%;position:fixed; left:0px; bottom: 1px; z-index:99;}
.optScroller:hover {background-color:#fff; opacity: 0.1}
#tooTop{display:block;outline:none;position:fixed;z-index:100;}


.knpk {
padding-top: 50%;
padding-left: 2px;
}
G0
На сайте с 10.08.2013
Offline
12
Gug007
#10

Картинку нужно вставить в ссылку 


.pageScroller {position:fixed;width:88px;height:100%; left:0px; bottom: 1px; box-shadow:inset 0 1px 0 0 #fff;}

.optScroller {background:#fff; width:88px;height:100%;opacity: 0; z-index:99;}

.pageScroller:hover {background-color:#fff; opacity: 0.9}

.knpk{display:block;outline:none;position:fixed;z-index:100;

top: 50%;left:11px;}



<div class="pageScroller">

 <div class="optScroller"></div>

 <a id="tooTop" class="knpk" href="#page"><img src="{THEME}/images/up.png"/></a>

</div>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий