ilyadenisovid
Мастер
Дата регистрации:
28.01.2013 18:32:29
Сообщений: 213
Здравствуйте! Делаю кнопку 'наверх' на сайт, нужно сделать без jQuery, но с JS. JS нужен для того, чтобы кнопка появлялась только если страница прокручена вниз. Делдаю так, но не выходит.
<script type = "text/javascript">
var top = document.documentElement.scrollTop;
if (top <> '0') document.write('<div id = "up"><a href = "#" title = "Наверх">↑ Наверх</a></div>');
</script>
tikkiwiki
Модератор
Дата регистрации:
15.11.2013 15:36:59
Сообщений: 194
Здравствуйте ilyadenisovid. Есть решение:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scriptjava.js"></script>
<title>Стрелка вверх вниз</title>
</head>
<body>
<script type="text/javascript">
(function () {
var page_up_div;
var page_up_key;
var page_up_nokey;
var page_up_div_create = function () {
page_up_div = $$i({
create:'div',
attribute: {},
insert:$$().body
}).$$('position','fixed').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('zIndex','5').$$('width','14px').$$('height','7px').$$('backgroundImage','url(updown.png)').$$('backgroundPosition','0 0').$$('backgroundRepeat','no-repeat').$$('cursor','pointer');
}
var page_up_timer = function () {
if(page_up_nokey) {
if($$s.scrollpos().t>=0 && $$s.scrollpos().t<=300) {
$$(page_up_div).$$('visibility','hidden');
}
else if($$s.scrollpos().t>300 && $$s.scrollpos().t<=1000) {
page_up_key=false;
$$(page_up_div).$$('visibility','visible').$$('top','50px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 -7px');
}
else if($$s.scrollpos().t>1000) {
page_up_key=true;
$$(page_up_div).$$('visibility','visible').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 0');
}
}
}
var pos_top,z;
var page_up_to_up_go = function () {
if(page_up_key) {
pos_top=pos_top-z;
z=z+10;
if(pos_top<0) {
page_up_nokey=true;
pos_top=0;
}
window.scrollTo(0, pos_top);
if(pos_top>0) {
setTimeout(function() { page_up_to_up_go(); },10);
}
}
else {
pos_top=pos_top+z;
z=z+10;
if(pos_top>=($$s.scrollsize().h-$$s.clientsize().h)) {
page_up_nokey=true;
pos_top=($$s.scrollsize().h-$$s.clientsize().h);
}
window.scrollTo(0, pos_top);
if(pos_top<($$s.scrollsize().h-$$s.clientsize().h)) {
setTimeout(function() { page_up_to_up_go(); },10);
}
}
}
var page_up_to_up = function (event) {
page_up_nokey=false;
z=10;
pos_top=$$s.scrollpos().t;
setTimeout(function() { page_up_to_up_go(); },10);
}
$$r(function() {
if(($$s.scrollsize().h-$$s.clientsize().h)>1000) {
page_up_nokey=true;
page_up_div_create();
$$e.add($$(page_up_div),'click',page_up_to_up);
page_up_timer();
setInterval(function() { page_up_timer(); },100);
}
});
})();
</script>
Немного прокрути скроллинг вниз, справа появится стрелка.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
5<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
6<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
7<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
8<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
9<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
10<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
11<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
12<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
13<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
14<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
15<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
16<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
17<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
18<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
19<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
20<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
21<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
22<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
23<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
24<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
25<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
26<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
27<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
28<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
29<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
30<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
scriptjava.js
/**
* scriptjava.js
* save time
* scriptjava.ru
* scriptjava.net
* scriptjava.org
*/
var _$$={
version:20120201,
$:function () {
var obj;
switch(arguments.length) {
case 0:
return document;
break;
case 2:
_$$.$(arguments[0]).innerHTML=arguments[1];
break;
case 3:
_$$.$(arguments[0]).style[arguments[1]]=arguments[2];
break;
}
if(arguments.length>0) {
if(typeof arguments[0] == 'string') {
obj=_$$.$().getElementById(arguments[0]);
}
else {
obj=arguments[0];
}
}
obj.$$ = function() {
switch(arguments.length) {
case 0:
this.$$ = function () {
return _$$.$.apply(null,arguments);
}
break;
case 1:
obj.innerHTML=arguments[0];
break;
case 2:
obj.style[arguments[0]] = arguments[1];
break;
case 3:
break;
}
return obj;
};
return obj;
},
$a:function (arg) {
arg = arg || {};
var default_arg = {
type:'get',
url:'',
data:{},
response:'text',
header:{
'Content-Type':'application/x-www-form-urlencoded; charset=windows-1251',
'Referer':location.href
},
async:true,
username:'',
password:'',
errrep:true,
error:function(num) {
var arr=['Your browser does not support Ajax',
'Request failed',
'Address does not exist',
'The waiting time left'];
alert(arr[num]);
},
status:function (number) {
},
endstatus:function (number) {
},
success:function (data) {
},
timeout:5000
}
for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}
var type = arg['type'];
var url = arg['url'];
var data = arg['data'];
var response = arg['response'];
var header = arg['header'];
var async = arg['async'];
var username = arg['username'];
var password = arg['password'];
var errrep = arg['errrep'];
var error = arg['error'];
var status = arg['status'];
var endstatus = arg['endstatus'];
var success = arg['success'];
var timeout = arg['timeout'];
var obj = function () {
var req = null;
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
}
catch (e){
}
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
}
}
}
return req;
}
var encurl=function (d) {
var query = [];
if (d instanceof Object) {
for (var k in d) {
query.push(encodeURIComponent(k) + '=' + encodeURIComponent(d[k]));
}
return query.join('&');
}
else {
return encodeURIComponent(d);
}
}
var parsehead = function(headertxt) {
var headers = {};
var ls = /^\s*/;
var ts = /\s*$/;
var lines = headertxt.split("\n"
for(var i = 0; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) continue;
var pos = line.indexOf(':');
var name = line.substring(0, pos).replace(ls, "".replace(ts, ""
var value = line.substring(pos+1).replace(ls, "".replace(ts, ""
headers[name] = value;
}
return headers;
}
var req=obj();
if(req!==null) {
var fullurl=url+'?'+encurl(data);
if(type=='get') {
(username=='' && password=='') ? req.open("GET", fullurl, async) : req.open("GET", fullurl, async, username, password);
}
else if(type=='post') {
(username=='' && password=='') ? req.open("POST", url, async) : req.open("POST", url, async, username, password);
}
else if(type=='head') {
(username=='' && password=='') ? req.open("HEAD", fullurl, async) : req.open("HEAD", fullurl, async, username, password);
}
if (header instanceof Object) {
for(var key in header) {
req.setRequestHeader(key,header[key]);
}
}
if(!async) {
if(type=='get' || type=='head') {
req.send(null);
}
else if(type=='post') {
req.send(encurl(data));
}
endstatus(req.status);
if(req.status == 200) {
if(type=='get' || type=='post') {
if(response=='text') {
success(req.responseText);
}
else if(response=='xml') {
success(req.responseXML);
}
}
else if(type=='head') {
success(parsehead(req.getAllResponseHeaders()));
}
}
else if(req.status == 404) {
if(errrep) {error(2);}
}
else {
if(errrep) {error(1);}
}
}
else {
req.onreadystatechange = function () {
status(req.readyState);
if(req.readyState == 4) {
if(reqtime) {
clearTimeout(reqtime);
}
endstatus(req.status);
if(req.status == 200) {
if(type=='get' || type=='post') {
if(response=='text') {
success(req.responseText);
}
else if(response=='xml') {
success(req.responseXML);
}
}
else if(type=='head') {
success(parsehead(req.getAllResponseHeaders()));
}
}
else if(req.status == 404) {
if(errrep) {error(2);}
}
else {
if(errrep) {error(1);}
}
}
}
if(type=='get' || type=='head') {
req.send(null);
}
else if(type=='post') {
req.send(encurl(data));
}
if(timeout>0) {
var reqtime = setTimeout(function () { if(req.readyState!=4) { req.abort(); if(errrep) {error(3);} } }, timeout);
}
}
}
else {
if(errrep) {error(0);}
}
},
$c:{
set: function(cookie_name, cookie_value, cookie_expires, cookie_path, cookie_domain, cookie_secure) {
if(cookie_name!==undefined) {
cookie_expires=cookie_expires || 0;
var expire_date = new Date;
expire_date.setTime(expire_date.getTime() + (cookie_expires*1000));
_$$.$().cookie = cookie_name + "=" + encodeURIComponent(cookie_value)+'; ' +
((cookie_expires === undefined) ? '' : 'expires=' + expire_date.toGMTString()+'; ') +
((cookie_path === undefined) ? 'path=/;' : 'path='+cookie_path+'; ') +
((cookie_domain === undefined) ? '' : 'domain='+cookie_domain+'; ') +
((cookie_secure === true) ? 'secure; ' : '');
}
},
get: function(cookie_name) {
var cookie = _$$.$().cookie, length = cookie.length;
if(length) {
var cookie_start = cookie.indexOf(cookie_name + '=');
if(cookie_start != -1) {
var cookie_end = cookie.indexOf(';', cookie_start);
if(cookie_end == -1) {
cookie_end = length;
}
cookie_start += cookie_name.length + 1;
return decodeURIComponent(cookie.substring(cookie_start, cookie_end));
}
}
},
erase: function(cookie_name) {
this.set(cookie_name, '', -1);
},
test: function() {
this.set('test_cookie', 'test', 10);
var work = (this.get('test_cookie') === 'test') ? true : false;
this.erase('test_cookie');
return work;
}
},
$e:{
add:function(elem, type, handler) {
if(elem.event_list==undefined) elem.event_list = {};
if(elem.event_list[type]==undefined) {
elem.event_list[type] = [];
var func = function(event) {
var event = event||window.event;
var list = elem.event_list[type];
for(var i in list) {
list[i](event);
}
}
if(elem.addEventListener) {
elem.addEventListener(type,func,false);
}
else if(elem.attachEvent) {
elem.attachEvent('on'+type,func);
}
else {
elem['on'+type] = func;
}
}
var list = elem.event_list[type];
var exist = false;
for(var i in list) {
if(list[i]==handler) exist = true;
}
if(!exist) {
elem.event_list[type].push(handler);
}
},
remove:function(elem, type, handler) {
if(elem.event_list==undefined) return false;
if(elem.event_list[type]==undefined) return false;
var list = elem.event_list[type];
for(var i in list) {
if(list[i]==handler) {
list = list.splice(i,1);
return true;
}
}
return false;
}
},
$f:function (arg) {
arg = arg || {};
var default_arg = {
formid:'',
url:'',
onstart:function () {
},
onsend:function () {
}
}
for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}
var formid = arg['formid'];
var url = arg['url'];
var onsend = arg['onsend'];
var onstart = arg['onstart'];
var id='f' + _$$.$s.randnum(0,1000000);
var div=_$$.$i({
create:'div',
attribute: {},
insert:_$$.$().body
});
div.innerHTML = '<iframe style="width:250px;height:200px;" src="about:blank" id="'+id+'" name="'+id+'" onload="if(this.onsendcomplete) {if(this.contentDocument) {var d = this.contentDocument;}else if(this.contentWindow) {var d = this.contentWindow.document;}else {var d = window.frames[this.id].document;}if(d.location.href != \'about:blank\') {this.onsendcomplete();}}"></iframe>';
div.style.display='none';
_$$.$(id).onsendcomplete = function() { onsend(); };
_$$.$(formid).setAttribute('target', id);
_$$.$(formid).setAttribute('action', url);
_$$.$(formid).submit();
onstart();
return div;
},
$i:function (arg) {
arg = arg || {};
var default_arg = {
create:'script',
attribute: {
'type':'text/javascript'
},
insert:_$$.$().body,
onready:function () {
}
}
for(var index in default_arg) {
if(typeof arg[index] == "undefined" arg[index] = default_arg[index];
}
var create = arg['create'];
var attribute = arg['attribute'];
var insert = arg['insert'];
var onready = arg['onready'];
var s = _$$.$().createElement(create);
for(var key in attribute) {
s.setAttribute(key,attribute[key]);
}
if(create=='script' && (typeof attribute.src != "undefined") {
if (s.readyState) {
s.onreadystatechange = function() {
if(s.readyState == "loaded" || s.readyState == "complete" {
s.onreadystatechange = null;
onready();
}
}
}
else {
s.onload = function() {
onready();
}
}
}
insert.appendChild(s);
if(create=='script' && (typeof attribute.src == "undefined") {
s.$$=function () {
s.text=arguments[0];
}
}
else if(create=='style') {
s.$$=function () {
if(s.styleSheet) {
s.styleSheet.cssText = _$$.$().createTextNode(arguments[0]).nodeValue;
}
else {
s.appendChild(_$$.$().createTextNode(arguments[0]));
}
}
}
else {
return _$$.$(s);
}
return s;
},
$r:{
rl:[],
or:function (handler) {
if (!_$$.$r.rl.length) {
_$$.$r.br(function() {
for(var i=0; i<_$$.$r.rl.length; i++) {
_$$.$r.rl[i]();
}
});
}
_$$.$r.rl.push(handler);
},
br:function (handler) {
var called = false;
var ready = function () {
if (called) return;
called = true;
handler();
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
ready();}, false);
}
else if(document.attachEvent) {
if(document.documentElement.doScroll && window == window.top) {
var tryScroll = function (){
if (called) {
return;
}
try {
document.documentElement.doScroll("left"
ready();
}
catch(e) {
setTimeout(tryScroll, 10);
}
}
tryScroll();
}
document.attachEvent("onreadystatechange", function(){
if (document.readyState === "complete" {
document.detachEvent( "onreadystatechange", arguments.callee);
ready();
}
});
}
if(window.addEventListener) {
window.addEventListener('load', ready, false);
}
else if(window.attachEvent) {
window.attachEvent('onload', ready);
}
else {
window.onload=ready;
}
}
},
$s:{
screensize:function () {
return {"w":screen.width,"h":screen.height};
},
windowpos:function () {
if (window.screenLeft || window.screenTop) {
return {"l":window.screenLeft,"t":window.screenTop};
}
else if (window.screenX || window.screenY) {
return {"l":window.screenX,"t":window.screenY};
}
else {
return {"l":0,"t":0};
}
},
clientsize:function () {
if (window.innerWidth || window.innerHeight) {
return {"w":window.innerWidth,"h":window.innerHeight};
}
else if (_$$.$().documentElement && (_$$.$().documentElement.clientWidth || _$$.$().documentElement.clientHeight)) {
return {"w":_$$.$().documentElement.clientWidth,"h":_$$.$().documentElement.clientHeight};
}
else if (_$$.$().body.clientWidth || _$$.$().body.clientHeight) {
return {"w":_$$.$().body.clientWidth,"h":_$$.$().body.clientHeight};
}
else {
return {"w":0,"h":0};
}
},
scrollpos:function () {
if (window.innerWidth || window.innerHeight) {
return {"l":window.pageXOffset,"t":window.pageYOffset};
}
else if (_$$.$().documentElement && (_$$.$().documentElement.clientWidth || _$$.$().documentElement.clientHeight)) {
return {"l":_$$.$().documentElement.scrollLeft,"t":_$$.$().documentElement.scrollTop};
}
else if (_$$.$().body.clientWidth || _$$.$().body.clientHeight) {
return {"l":_$$.$().body.scrollLeft,"t":_$$.$().body.scrollTop};
}
else {
return {"l":0,"t":0};
}
},
scrollsize:function () {
if (_$$.$().documentElement && (_$$.$().documentElement.scrollWidth || _$$.$().documentElement.scrollHeight)) {
return {"w":_$$.$().documentElement.scrollWidth,"h":_$$.$().documentElement.scrollHeight};
}
else if (_$$.$().body.scrollWidth || _$$.$().body.scrollHeight) {
return {"w":_$$.$().body.scrollWidth,"h":_$$.$().body.scrollHeight};
}
else {
return {"w":0,"h":0};
}
},
mousepos:function (e) {
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY) {
x = e.clientX+this.scrollpos().l-_$$.$().documentElement.clientLeft;
y = e.clientY+this.scrollpos().t-_$$.$().documentElement.clientTop;
}
return {"x":x, "y":y};
},
mouseelpos:function (e) {
var x = 0, y = 0;
if (!e) e = window.event;
if (e.layerX || e.layerY) {
x = e.layerX;
y = e.layerY;
}
else if (e.offsetX || e.offsetY) {
x = e.offsetX;
y = e.offsetY;
}
return {"x":x, "y":y};
},
elementpos:function (el) {
var l = 0, t = 0;
while (el) {
l += el.offsetLeft;
t += el.offsetTop;
el = el.offsetParent;
}
return {"l":l, "t":t};
},
getelbyclass:function (n,t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
if (elms[i].className==n) {
relm.push(elms[i]);
}
}
return relm;
},
getelbytag:function (t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
relm.push(elms[i]);
}
return relm;
},
getelbyname:function (n,t) {
t = t || '*';
var elms=[], relm=[];
elms=_$$.$().getElementsByTagName(t);
for(var i=0;i<elms.length;i++) {
if(elms[i].getAttribute('name')==n) {
relm.push(elms[i]);
}
}
return relm;
},
geteventtype:function (e) {
if (!e) e = window.event;
return e.type;
},
mousebutton:function (e) {
if(e.which == null) {
return (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right"
}
else {
return (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right"
}
},
randnum: function(rmin, rmax) {
return Math.floor(Math.random() * (rmax - rmin + 1)) + rmin;
},
browsername: function () {
var useragent=navigator.userAgent;
var navigatorname;
if(useragent.indexOf('MSIE')!= -1) {
navigatorname="MSIE";
}
else if(useragent.indexOf('Safari')!= -1) {
if(useragent.indexOf('Chrome')!= -1) {
navigatorname="Chrome";
}
else {
navigatorname="Safari";
}
}
else if(useragent.indexOf('Gecko')!= -1) {
if(useragent.indexOf('Chrome')!= -1) {
navigatorname="Chrome";
}
else {
navigatorname="Mozilla";
}
}
else if(useragent.indexOf('Mozilla')!= -1) {
navigatorname="Old Netscape or Mozilla";
}
else if(useragent.indexOf('Opera')!= -1) {
navigatorname="Opera";
}
return navigatorname;
}
}
};
var $ver=_$$.version;
var $$=_$$.$;
var $$a=_$$.$a;
var $$c=_$$.$c;
var $$e=_$$.$e;
var $$f=_$$.$f;
var $$i=_$$.$i;
var $$r=_$$.$r.or;
var $$s=_$$.$s;
Картинка за Вами...
ilyadenisovid
Мастер
Дата регистрации:
28.01.2013 18:32:29
Сообщений: 213
Извините, модератор, но за чем скачивать из интернета какой-то бездарный скрипт, у данного вопроса, есть простое решение, а вот это я уже находил в интернете, тем более сторонняя библиотека подключается. Единственное, что тут нужно, проверить, если верхняя координата не равна 0, то появляется ссылка. Проблема только в коде. На будущее, не стоит несмотря скачивать скрипт из интернета.
tikkiwiki
Модератор
Дата регистрации:
15.11.2013 15:36:59
Сообщений: 194
Уважаемый ilyadenisovid, так пользуйтесь интернетом и решите Вашу проблему. Я не знаю на сколько Вы "умны", может Вы не умеете пользоваться интернетом.
На будущее- не стоит умничать.
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
а зачем Вам скрипты вообще?
сделайте якорь вверху,потом просто кнопку вставьте,в position:fixed
только в див какой-нибудь,который будет появляться когда чуть ниже опустится экран
ilyadenisovid
Мастер
Дата регистрации:
28.01.2013 18:32:29
Сообщений: 213
Я и говорю, мне скрипт не нужен. Мне нужно буквально пару строчек js, нужно узнать если верхняя координата не 0(то есть пользователь прокрутил страницу), то появляется кнопка. Просто неинтересно, когда кнопка даже в начале страницы висит
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
тогда так:
<a href="#" title="Вернуться к началу" class="topbutton">^Наверх</a>
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
В стилях можно поиграться немного,например процентное соотношение отступа кнопки от верхней части экрана.Чтобы её сразу же не было видно на экране.
Плавного появления и прокрутки без скриптов не выйдет.
Пробовал пару способов,но безуспешно
с border-radius просто привычка добавлять -moz -webkit =)
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Нашёл такую реализацию.
С плавным движением
<div id="scrollup"><img class="up" alt="Прокрутить вверх" src="/img/up.png" /></div>
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}
ну и простенький яваскрипт:
window.onload = function() { // после загрузки страницы
var scrollUp = document.getElementById('scrollup'); // найти элемент
scrollUp.onmouseover = function() { // добавить прозрачность
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() { //убрать прозрачность
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() { //обработка клика
window.scrollTo(0,0);
};
// show button
window.onscroll = function () { // при скролле показывать и прятать блок
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};
как видите,тут используется ScrollUp ScrollTo
ilyadenisovid
Мастер
Дата регистрации:
28.01.2013 18:32:29
Сообщений: 213
У меня с CSS проблем не было, все было как у Вас, функции прозрачности я убрал, все делаю правильно, но вообще теперь блок не появляется.
window.onload = function() {
var scrollUp = document.getElementById('up');
window.onscroll = function () {
if (window.pageYOffset > 0) {
scrollUp.style.display = 'block';
}
else {
scrollUp.style.display = 'none';
}
};
};
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
можно весь код глянуть,со стилями?
может где-то забыли что-то.
а попробуйте с прозрачностью =)
Там же просто opacity
парой строк больше)
буду пробовать работу без прозрачности.Ожидайте.
И там в стилях через картинку реализация:вы так делали? или нет?