Вопрос о "Кнопке вверх".

[apollion]

Вопрос о "Кнопке вверх".

Один человек поделился со мной вариантом добавления кнопки вверх для phpbb 3. Я пробовал добавить кнопку на сайт - она не появляется и не работает. Может что-то не так с методом - не пойму. phpbb 3.0.12 subsilver2

Сам метод:

1. Залить картинку-кнопку на сервер.

2. В stylesheet.css добавить в конец:

Код: Выделить всё

.scrollToTop{
        width: 32px; 
        height: 32px;
        padding: 10px; 
        text-align:center; 
        background: whiteSmoke;
        font-weight: bold;
        color: #444;
        text-decoration: none;
        position:fixed;
        bottom: 10px;
        right: 10px;
        display:none;
        background: url('/images/arrow_up.png') no-repeat 0px 0px;
}
.scrollToTop:hover{
        text-decoration: none;
}

3. В overall_footer.html добавить в конце перед </body> следующий фрагмент

Код: Выделить всё

<script>
$(document).ready(function(){
        
        $(window).scroll(function(){
                if ($(this).scrollTop() > 200) {
                        $('.scrollToTop').fadeIn();
                } else {
                        $('.scrollToTop').fadeOut();
                }
        });
        
        //Click event to scroll to top
        $('.scrollToTop').click(function(){
                $('html, body').animate({scrollTop : 0},800);
                return false;
        });
        
});
</script>
<a href="#" class="scrollToTop"></a>

Кэш шаблона и форума очищал через админку. Кэш браузера тоже чистил.

[владимир1983]

Пробуй.

Код: Выделить всё

.scroll-btn {
	height: 30px;
	width: 30px;
	border: 2px solid #000;
	border-radius: 50%;
	background-color: #000;
	position: fixed;
	bottom: 45px;
	right: 15px;
	opacity: 0.5;
	z-index: 9999;
	cursor: pointer;
	display: none;
}

.scroll-btn .scroll-btn-arrow {
	height: 8px;
	width: 8px;
	border: 3px solid;
	border-right: none;
	border-top: none;
	margin: 12px 9px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	color: white;
}

.notouch .scroll-btn:hover { opacity: 0.8 }

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.scroll-btn {
		bottom: 8px;
		right: 8px;
	}
}

В overall_footer.html

Код: Выделить всё

<div class="scroll-btn"><div class="scroll-btn-arrow"></div></div>

<script>

(function($) { 

'use strict';

$(function() {
	var settings = {
			min: 200,
			scrollSpeed: 400
		},
		toTop = $('.scroll-btn'),
		toTopHidden = true;

	$(window).scroll(function() {
		var pos = $(this).scrollTop();
		if (pos > settings.min && toTopHidden) {
			toTop.stop().fadeIn();
			toTopHidden = false;
		} else if(pos <= settings.min && !toTopHidden) {
			toTop.stop().fadeOut();
			toTopHidden = true;
		}
	});

	toTop.bind('click touchstart', function() {
		$('html, body').animate({
			scrollTop: 0
		}, settings.scrollSpeed);
	});
});

})(jQuery);

</script>

[apollion]

Не нашел в коде ссылку на кнопку.

Сейчас попробую.

[владимир1983]

Кнопка сделана с помощью css. Вот этот код выводит кнопку

Код: Выделить всё

<div class="scroll-btn"><div class="scroll-btn-arrow"></div></div>

[apollion]

Нет, кнопки не появилось.

В футере пробовал добавить и перед body и перед кодом для recent topics. Проверял в 2-х браузерах. Странно.

[владимир1983]

Кнопка всплывающая и появляется только при небольшом скроле.
Дай ссылку на форум.

[apollion]

Форум http://movie-club.ru

Вот прямо сейчас должна быть. В футере код перед </body>. В stylesheet.css - в конце.

Отправлено спустя 2 минуты 58 секунд:
Метод, что дал мне мужик - у него на форуме работает. Кнопка всплывающая и появляется при прокрутке вниз от небольшой и до самого конца. Кнопку залил правильно - картинка открывается по правильному адресу.

[владимир1983]

Библиотека jquery не подключена.

Код: Выделить всё

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

[apollion]

Этот код куда воткнуть?

[владимир1983]

Перед закрывающим тегом </head>

Отправлено спустя 53 секунды:
В overall_header.html

[apollion]

Кнопка появилась. Спасибо.

Сейчас наверно залью скрипт jquery к себе на сервер для удобства.

[bozzafresco]

Сейчас наверно залью скрипт jquery к себе на сервер для удобства.

CDN для слабаков?)

[apollion]

Што?

[apollion]

владимир1983, Еще такой вопрос.

Использовал ваш вариант. Но после перезагрузки\обновления страницы кнопка пропадает - когда страница перемотана вниз. Появляется только если сдвинуть страницу вверх хотя бы на миллиметр. Как сделать, чтобы кнопка была видна если страница прокручена вниз до упора?

[GreatALF]

apollion, все норм работает, как и должно работать. Даже после обновления страницы.