Joomla 3.x Кнопка «Наверх»: как создать с CSS и jQuery

Тема в разделе "Интерактивные возможности", создана пользователем lev, 06.11.2020.

  1. lev
    Offline

    lev Активист => Cпециалист <=

    Регистрация:
    21.12.2007
    Сообщения:
    685
    Симпатии:
    40
    Пол:
    Мужской
    В шаблона Protostar уже была создана ссылка «Наверх»
    Код (CODE):
    1. <a href="#top" id="back-top">
    2.                     Наверх                </a>


    Также потребуется поставить плагин NS Font Awesome

    или прописать:
    Код (CODE):
    1. <link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">


    CSS для FontAwesome Chevron Up icon - если вы выбрали
    Код (CODE):
    1. #back-top::after {
    2.   content: "\f077";
    3.   font-family: FontAwesome;
    4.   font-weight: normal;
    5.   font-style: normal;
    6.   font-size: 2em;
    7.   line-height: 50px;
    8.   color: #fff;
    9. }


    Есть решение - Joomla 3 IcoMoon - иконок
    Код (CODE):
    1. #back-top::after {
    2.   content: "\e005";
    3.   font-family: IcoMoon;
    4.   font-weight: normal;
    5.   font-style: normal;
    6.   font-size: 2em;
    7.   line-height: 50px;
    8.   color: #fff;
    9. }


    Для удаления из ссылки надписи «Наверх»
    Код (CODE):
    1. $("#back-top").text('')


    Код (CODE):
    1. var btn = $('#back-top');
    2.  
    3. $(window).scroll(function() {
    4.   if ($(window).scrollTop() > 300) {
    5.     btn.addClass('show');
    6.   } else {
    7.     btn.removeClass('show');
    8.   }
    9. });
    10.  
    11. btn.on('click', function(e) {
    12.   e.preventDefault();
    13.   $('html, body').animate({scrollTop:0}, '300');
    14. });
    15. });

    Код (CODE):
    1. #back-top {
    2.   display: inline-block;
    3.   background: #0088cc;
    4.   width: 50px;
    5.   height: 50px;
    6.   text-align: center;
    7.   border-radius: 4px;
    8.   position: fixed;
    9.   bottom: 30px;
    10.   right: 30px;
    11.   transition: background-color .3s,
    12.     opacity .5s, visibility .5s;
    13.   opacity: 0;
    14.   visibility: hidden;
    15.   z-index: 1000;
    16. }
    17. #back-top::after {
    18. content: "\e005";
    19. font-family: IcoMoon;
    20. font-weight: normal;
    21. font-style: normal;
    22. font-size: 2em;
    23. line-height: 50px;
    24. color: #fff;
    25. }
    26. #back-top:hover, #back-top:focus {
    27.   text-decoration: none;
    28. }
    29. #back-top:active {
    30.   background: #333333;
    31. }
    32. #back-top.show {
    33.   opacity: 1;
    34.   visibility: visible;
    35. }
    - в CSS добавлен "text-decoration: none;" в hover и focus и "background-color" заменен на background :confused:

    Изменил в CSS
    Код (CODE):
    1. #back-top:hover, #back-top:focus {
    2.   cursor: pointer;
    3.   background: #333;
    4.   text-decoration: none;
    5. }
    6. #back-top:active {
    7.   background: #555;
    8. }


    ЗЫ.: остальное содрано на просторах рунета

    Демо
     

    Вложения:

    Последнее редактирование: 06.11.2020
  2.  

Поделиться этой страницей

Загрузка...