Как сделать кнопку «Наверх» без плагинов
Делаем ушку body_end. Ушка уже предопределена в main.php шаблона, поэтому её нигде прописывать не нужно. Как вариант, можно использовать ушки footer-start или footer-end, но это не принципиально.
Тип ушки задаём как PHP и пишем в ней:
<div id="to_top" style="position: fixed; right: 0; bottom: 0;
width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div>
<?= mso_load_jquery('jquery.scrollto.js');?>
<script>
$('#to_top').click(function(){$.scrollTo("body", 300)})
</script>Элементу div#to_top указываем фиксированное положение, размеры, цвет и текстовую иконку-стрелку. После подключаем jQuery-плагин scrollto - он в уже комплекте MaxSite CMS, предназначен для красивого скролирования к любому HTML-тэгу. Дальше указываем, что скролировать нужно к BODY и время скролинга (300мс).
Пользуемся!
UPD. Вот ещё один вариант от Дениса. Код ушки body_end.
<div id="to_top" style="position: fixed; right: 0; bottom: 0;
width: 30px; height: 30px; color: red; cursor: pointer;" title="Вверх!">⬆</div>
<script>
$("#to_top").hide();
// fade in #to_top
$(function ()
{
$(window).scroll(function ()
{
if ($(this).scrollTop() > 300)
{
$("#to_top").fadeIn();
}
else
{
$("#to_top").fadeOut();
}
});
// scroll body to 0px on click
$("#to_top").click(function ()
{
$("body,html").animate( {scrollTop: 0}, 800);
return false;
});
});
</script>
Скрол в Хроме не срабатывает наверное есть проблема с jquery...
у меня так. без доп файлов. в хроме работает
$("#back-top").hide();<br> <br> // fade in #back-top<br> $(function () {<br> $(window).scroll(function () {<br> if ($(this).scrollTop() > 300) {<br> $("#back-top").fadeIn();<br> } else {<br> $("#back-top").fadeOut();<br> }<br> });<br> // scroll body to 0px on click<br> $("#back-top a").click(function () {<br> $("body,html").animate({<br> scrollTop: 0<br> }, 800);<br> return false;<br> });<br> });Спасибо, вариант даже интересней! Добавил в запись ваш вариант.
Еще бы кнопки сами нарисовать через css со стрелками..
да, второй вариант действительно понравился больше. Спасибо!