Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Кнопка "наверх"

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: CompactDOM, метод "scroll", div-кнопка "наверх"
Vladimir Kheifets
Отправлено: 11 Апреля, 2021 - 10:31:18
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




Добрый день!

Если Вам потребуется добавить на сайте 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

Удачи!
Прикреплено изображение (Нажмите для увеличения)
Screenshot 2021-04-10 160255_2.jpg

(Отредактировано автором: 11 Апреля, 2021 - 10:32:11)

 
 Top
armancho7777777 Супермодератор
Отправлено: 11 Апреля, 2021 - 12:40:12
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Я бы реализовал как-то так:

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
 
 Top
Vladimir Kheifets
Отправлено: 11 Апреля, 2021 - 18:17:15
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




Спасибо за ответ!
Хорошее решение, с анимацией. М.б. кнопка не должна быть видна постоянно?
Метод 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. };


Отредактировано модератором: armancho7777777, 13 Апреля, 2021 - 09:12:02
 
 Top
Lolya
Отправлено: 13 Июня, 2021 - 21:33:32
Post Id


Гость


Покинул форум
Сообщений всего: 69
Дата рег-ции: Май 2018  


Помог: 2 раз(а)




Простота наше всё.
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div align="center"><a href="#top" style="position:fixed;bottom:0pt;right:0pt;"><font size='6'>&#11145;</font></a></div>
 
 Top
Vladimir Kheifets
Отправлено: 14 Июня, 2021 - 05:26:43
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




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.w3schools.com/tags/tag_font.asp

(Отредактировано автором: 14 Июня, 2021 - 05:57:44)

 
 Top
don.bidon
Отправлено: 14 Июня, 2021 - 08:28:08
Post Id


Гость


Покинул форум
Сообщений всего: 78
Дата рег-ции: Март 2019  


Помог: 2 раз(а)




Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

в правом нижнем углу штырь появляется, ну и якорь вверху документа нужно обозначить.
 
 Top
Vladimir Kheifets
Отправлено: 14 Июня, 2021 - 10:41:26
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




don.bidon пишет:
Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

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

Спасибо, разглядел очень мелкий штырь с подчеркинием.
 
 Top
Lolya
Отправлено: 14 Июня, 2021 - 11:15:04
Post Id


Гость


Покинул форум
Сообщений всего: 69
Дата рег-ции: Май 2018  


Помог: 2 раз(а)




don.bidon пишет:
Vladimir Kheifets пишет:
Хотелось бы увидеть как работает Ваша проста. Мне не удалось. Пустота.

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

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

Цвет можно вставить в гиперссылки в принципе.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB