Кнопка вверх, вниз, назад, как вконтакте
Не работает такая кнопка правильно
Захотел поставить на сайт кнопку вверх, как вконтакте. Там она работает хитро, если опускаешься вниз, то она показывает "Наверх", а когда поднялся наверх, то показывает "Вниз", и при нажатии ты пойдешь туда вниз, откуда поднялся наверх. И еще одна фишка ее — это назад. Так вот, я поставил такой скрипт: habrahabr.kz/admin_1369_knopka-vverh-kak-vkontakte.html, но не работает все как надо, только вверх, почему-то… Может кто-то знает как решить эту проблему страшную?
Речь идет о сайте tanat.info/, кнопка стоит там, но работает только вверх. Раньше мне и этого хватало, но если есть больше функций, то почему бы и нет.
Честно, мне иногда было легче прописать скрипт прямо в файл шаблона, если он коротенький.
п.с.: и незачто!
скрипт можно вставить и в теле не обязательно в headПроверьте чтоб не ниже </head>
А вот код, который стоит у меня сейчас:
$(document).ready(function(){$("#topvk").css('display','none');$(function(){$('#topvk').click(function(){$('html, body').stop().animate({scrollTop:$("body").offset().top},0)})});if(document.referrer==''){$("#topvk").hide()}else{$("#topvk").show();$('#topvk nobr').text('Назад').removeAttr('class').attr('class','back');$('#topvk').attr('onclick','window.location=\''+document.referrer+'\'')}});jQuery(window).scroll(function(){if(jQuery(window).scrollTop()>100){$("#topvk").show();$('#topvk nobr').text('Наверх').removeAttr('class');$('#topvk').removeAttr('onclick')}else{if(document.referrer==''){$("#topvk").hide()}else{$("#topvk").show();$('#topvk nobr').text('Назад').removeAttr('class').attr('class','back');$('#topvk').attr('onclick','window.location=\''+document.referrer+'\'')}}});document.write('<style>#topvk nobr{opacity:0.3;height:14px;padding:0px 20px;margin:0 31px 0 15px;font-weight:bold;font-family:tahoma,arial,verdana,sans-serif,Lucida Sans;font-size:11px;color:#45688e;background:url(/vk_up_back/vk_up_back.gif) no-repeat left 3px;-webkit-transition-property:opacity;-webkit-transition-duration:200ms;-moz-transition-property:opacity;-moz-transition-duration:200ms;}#topvk:hover nobr{opacity:1;height:14px;padding:0px 20px;margin:0 31px 0 15px;font-weight:bold;font-family:tahoma,arial,verdana,sans-serif,Lucida Sans;font-size:11px;color:#45688e;background:url(/vk_up_back/vk_up_back.gif) no-repeat left 3px;}.back{background:url(/vk_up_back/vk_up_back.gif) no-repeat left -22px!important;}#topvk{top:0px;left:0px;padding:13px 0 13px;cursor:pointer;display:none;width:100px;height:100%;position:fixed;cursor:pointer;-webkit-transition-property:background;-webkit-transition-duration:200ms;-moz-transition-property:background;-moz-transition-duration:200ms;}#topvk:hover{background:#e1e7ed;}</style><div id="topvk"><nobr id="stl_text">Наверх</nobr></div>');
Thanatognozija, а вы попробуйте использовать ту реализацию по ссылке.
Я вижу у вас в коде есть функции jQwery. Я бы на вашем месте использовала только простую джаву, потому что система наша работает с библиотеками jQwery, а это может вызвать конфликты со сторонними скриптами и для этого может понадобиться вообще помощь программистов…
Единственное что наверное не удастся поставить — это окошко полупрозрачное, которое активизируется. Можно только чтоб оно резко меняло цвет.
О, а ещё можно перерисовать кнопку назад и сделать её кнопкой вверх, а так же переписать ей скрипт.)))