Не секрет, что кнопка вверх очень облегчает пользователям и гостям сайта поднимать страницу. И здесь главное поставить нормальный скрипт с изображение кнопки вверх. Чтоб в первую очередь она была заметна и всегда в любое время можно пользоваться этой функцией. Но и второе, это ее появление в нужном месте, а не так, когда ты только опустил страницу в низ и она только появиться. Здесь нужно выверять хорошо и где то больше половины пройдя, она должна уже быть.
Что и представляю скрипт, где по умолчанию стоит кнопка с надпись.И она рассчитана на темный дизайн. Но она под стилями стоит на ссылке и есть тема "Круглая кнопка вверх в 6 вариантах" где можете подобрать по цветку кнопку и поставит, а точнее просто заменить ее.
Приступаем к установке:
В CSS:
Код
.scrollup {width: 66px;height: 83px;position: fixed;bottom: 50px;left: 15px;display: none;text-indent: -9999px;background: url('http://zornet.ru/Aben/ABGER/vverkh.png') no-repeat;opacity: 0.5;}
Как видим в стилях в самом конце стоит opacity: 0.5; - что отвечает за прозрачность.
Остается в низ сайта поставить скрипт.
Код
<!-- <Вверх> -->
<a href="#" class="scrollup"></a>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 700) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<!-- </Вверх> -->
Все после когда сохраните, то кнопка автоматически начинает работать на вашем сайте.
