Кнопка вверх без плагинов - Модификация стилей - Invision Community Jump to content

Russian support for Invision Community

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


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

 

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

 

1664753309_.png.d23bc21f4bd35170bef995fac5b524da.png.4d0d5a5e7497cad09ac77e86cde31b9a.png

  • Like 1
 Share

User Feedback

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...

Important Information

Privacy Policy We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.