Форумы портала PHP.SU :: Версия для печати

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
Форумы портала PHP.SU :: Версия для печати :: Кнопка "наверх"

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

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

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

Добрый день!

Если Вам потребуется добавить на сайте div-кнопку "наверх",
то это можно сделать так:

CODE (html):
скопировать код в буфер обмена

<html>
<head>
<link rel="stylesheet" href="button_to_up.css" >
<script src="CompactDOM.min.js"></script>
<script>
//CompactDOM script
start = function() 
{
    __.scroll();
}
__.load(start);
</script>
</head>
<body>
<!--   content      -->
</body>
</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):
скопировать код в буфер обмена

function scrollToTop(scrollingElement, duration) {
    var startPosition = scrollingElement.scrollTop;
    var startTime = performance.now();
    duration = duration || 0;
    requestAnimationFrame(function animate(time) {
        var timeFraction = (time - startTime) / duration;
        if (timeFraction > 1) {
            timeFraction = 1;
        }
        scrollingElement.scrollTop = startPosition - timeFraction * startPosition;
        if (timeFraction < 1) {
            requestAnimationFrame(animate);
        }
    });
}
 
var btnScroll2top = document.getElementById('btnScroll2top');
btnScroll2top.addEventListener('click', function() {
    scrollToTop(document.scrollingElement, 150);
});

Демка:
_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):
скопировать код в буфер обмена

this.scroll = function(ev_function){
        if(!ev_function)
        {               
                id=(!InEl)?"scrollup":InEl.substr(1);                           
                this.create(1,{tag:"div", id:id, title:"Top"});
                scrollUp =_("#"+id);
                scrollUp.create(String.fromCharCode(0x276E),{tag:"div",class:"arrow"});  
                scrollUp.click(function() {window.scrollTo(0,0);});
                dbl=this.dbl;
                dno=this.dno;
                ShowButtonGoTop = function (){
                        // show button go Top ---------------------             
                        dis= window.pageYOffset>0?dbl:dno;
                        scrollUp.display(dis);                  
                        //---------------------
                };
                this.scroll(ShowButtonGoTop);
        }
        else
        {
                if(!InEl) this.El=document;     
                this.event('scroll', ev_function);
        }       
};

4. Lolya - 13 Июня, 2021 - 21:33:32 - перейти к сообщению

Простота наше всё.

CODE (htmlphp):
скопировать код в буфер обмена

<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):
скопировать код в буфер обмена

<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):
скопировать код в буфер обмена

//создаёт кнопку и обработчики событий scroll, click 
__.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, это значит прижать вверх страницы.

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