Открываем наш стиль, в самый низ в globalTemplate ставим этот код:
<a href="#" class="scrollup">Наверх</a>
Это в custom css:
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу.
Теперь подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>...</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Затем сразу после подключения библиотеки необходимо в globalTemplate расположить следующий код JQuery:
<script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
И так же Вам понадобится изображение самой стрелки:
Recommended Comments
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.