Jump to content
IPS Invision Community
Sign in to follow this  

Кнопка вверх без плагинов


Description

Выводит кнопочку вверх, без использования плагинов и дополнений.

И так начнем:

Открываем наш стиль, в самый низ в 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>

И так же Вам понадобится изображение самой стрелки:

icon_top.png.e9730ab8cabac0d793c9c7dc422c77af.png.5085d7d5361c336bf09b623695527ac6.png

  • Спасибо 1


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...