Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Кнопка "наверх"

Страниц (1): [1]
 

1. Vladimir Kheifets - 11 Апреля, 2021 - 10:31:18 - перейти к сообщению
Добрый день!

Если Вам потребуется добавить на сайте div-кнопку "наверх",
то это можно сделать так:
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="button_to_up.css" >
  4. <script src="CompactDOM.min.js"></script>
  5. <script>
  6. //CompactDOM script
  7. start = function()
  8. {
  9.     __.scroll();
  10. }
  11. __.load(start);
  12. </script>
  13. </head>
  14. <body>
  15. <!--   content      -->
  16. </body>
  17. </html>

CompactDOM.min.js и button_to_up.css можно взять здесь:
https://github[dot]com/VladimirKheif[dot][dot][dot]brary-CompactDOM
см. в readme.txt 1.1.2 Method - "scroll".
b. Create element scrollup and scroll events handler.

Демо(РС, смартфоны, таблеты):
https://www[dot]alto-booking[dot]com/dem[dot][dot][dot]ub/CaesarCipher/
https://github[dot]com/VladimirKheif[dot][dot][dot]ass-CaesarCipher

Удачи!
2. armancho7777777 - 11 Апреля, 2021 - 12:40:12 - перейти к сообщению
Я бы реализовал как-то так:

CODE (javascript):
скопировать код в буфер обмена
  1. function scrollToTop(scrollingElement, duration) {
  2.     var startPosition = scrollingElement.scrollTop;
  3.     var startTime = performance.now();
  4.     duration = duration || 0;
  5.     requestAnimationFrame(function animate(time) {
  6.         var timeFraction = (time - startTime) / duration;
  7.         if (timeFraction > 1) {
  8.             timeFraction = 1;
  9.         }
  10.         scrollingElement.scrollTop = startPosition - timeFraction * startPosition;
  11.         if (timeFraction < 1) {
  12.             requestAnimationFrame(animate);
  13.         }
  14.     });
  15. }
  16.  
  17. var btnScroll2top = document.getElementById('btnScroll2top');
  18. btnScroll2top.addEventListener('click', function() {
  19.     scrollToTop(document.scrollingElement, 150);
  20. });


Демка:
_https://codepen.io/armd-pro/embed/KKaQKbv?height=265&theme-id=dark&default-tab=js,result
3. Vladimir Kheifets - 11 Апреля, 2021 - 18:17:15 - перейти к сообщению
Спасибо за ответ!
Хорошее решение, с анимацией. М.б. кнопка не должна быть видна постоянно?
Метод scroll в CompactDOM, я реализовал так:
CODE (javascript):
скопировать код в буфер обмена
  1. this.scroll = function(ev_function){
  2.         if(!ev_function)
  3.         {              
  4.                 id=(!InEl)?"scrollup":InEl.substr(1);                          
  5.                 this.create(1,{tag:"div", id:id, title:"Top"});
  6.                 scrollUp =_("#"+id);
  7.                 scrollUp.create(String.fromCharCode(0x276E),{tag:"div",class:"arrow"});  
  8.                 scrollUp.click(function() {window.scrollTo(0,0);});
  9.                 dbl=this.dbl;
  10.                 dno=this.dno;
  11.                 ShowButtonGoTop = function (){
  12.                         // show button go Top ---------------------            
  13.                         dis= window.pageYOffset>0?dbl:dno;
  14.                         scrollUp.display(dis);                 
  15.                         //---------------------
  16.                 };
  17.                 this.scroll(ShowButtonGoTop);
  18.         }
  19.         else
  20.         {
  21.                 if(!InEl) this.El=document;    
  22.                 this.event('scroll', ev_function);
  23.         }      
  24. };
4. Lolya - 13 Июня, 2021 - 21:33:32 - перейти к сообщению
Простота наше всё.
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div align="center"><a href="#top" style="position:fixed;bottom:0pt;right:0pt;"><font size='6'>&#11145;</font></a></div>
5. Vladimir Kheifets - 14 Июня, 2021 - 05:26:43 - перейти к сообщению
Lolya пишет:
Простота наше всё.
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div align="center"><a href="#top" style="position:fixed;bottom:0pt;right:0pt;"><font size='6'>&#11145;</font></a></div>


Добрый день!
Kaк работает метод scroll Вы можете увидеть здесь:
https://www[dot]alto-booking[dot]com/dem[dot][dot][dot]ub/CaesarCipher/
Чтобы появилась кнопка нужно просто втавить вызов метода scroll.
CODE (javascript):
скопировать код в буфер обмена
  1. //создаёт кнопку и обработчики событий scroll, click
  2. __.scroll();

Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.
Между прочим:
Цитата:
HTML <font> Tag
Not Supported in HTML5

https://www[dot]w3schools[dot]com/tags/tag_font[dot]asp
6. don.bidon - 14 Июня, 2021 - 08:28:08 - перейти к сообщению
Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

в правом нижнем углу штырь появляется, ну и якорь вверху документа нужно обозначить.
7. Vladimir Kheifets - 14 Июня, 2021 - 10:41:26 - перейти к сообщению
don.bidon пишет:
Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

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

Спасибо, разглядел очень мелкий штырь с подчеркинием.
8. Lolya - 14 Июня, 2021 - 11:15:04 - перейти к сообщению
don.bidon пишет:
Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

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

Не штырь а вверх стрелочка из знаков таблицы юникода. Прописывать дополнительно ничего не нужно, в самом html уже это есть, ибо top, это значит прижать вверх страницы.

Цвет можно вставить в гиперссылки в принципе.

 

Powered by ExBB FM 1.0 RC1