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

В шаблона 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('')

Спойлер: jQuery

Код (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. });

Спойлер: CSS

Код (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

Изменил в 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. }

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

Демо