Jump to content
  • Sign in to follow this  

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


    Maiden8

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

    Sign in to follow this  


    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

×