Главная
Wordpress
Кнопка возврата на верх страницы java и jquery
  • 28 Мар 2014г
  • 2023
  • 0
  • Рубрика: Wordpress

Кнопка возврата на верх страницы java и jquery

Доброго времени суток!
Сегодня я предоставлю вашему вниманию скрипт, который поможет организовать вам возврат на верх страницы. Данный скрипт можно использовать везде. Я использую его на своем сайте, который работает на WordPress. То есть если вы как и я отдаете предпочтение коду, а не плагину, то эта статья для Вас 🙂
И так приступим.

Кнопка JavaScript

1. Подключение скрипта.

Для начала нам понадобится сам скрипт. Он написан на JavaScript и выглядит так:

function up() {  
  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);  
if(top > 0) {  
  window.scrollBy(0,((top+100)/-10));  
  t = setTimeout('up()',20);  
} else clearTimeout(t);  
return false;  
} 

Этот скрипт плавно возвращает к верху, а в самом конце замедляется. Его можно немного настроить.

+100 - это высота на которой скрипт начинает замедлятся вверху.
-10 - это количество пикселей, которое прокручивается при движении на верх.
20 - это 0,02 секунды за которые прокручиваются те 10 пикселей что указаны как (-10)

Скрипт можно в ставить в html код, заключив его в теги:

 
<script type="text/javascript">...</script>

Для WordPress
Лично я не люблю засорять html код лишним, поэтому я создал папку js(в некоторых темах она есть по умолчанию.) в которой создал файл backtop.js и в него поместил код возврата.
Потом в файле footer.php перед закрывающимся

</body>

указываем путь к файлу:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/backtop.js"></script> 

Если Ваш возврат будет не плавным, а резко перескакивать вверх, то нужно вставлять не в footer.php, а в header.php перед закрывающимся

 </head> 

2. Добавление кнопки.

В подходящее место html-кода страницы необходимо добавить такой код:

 
<div id="back-top">
<a href="#" onclick="return up()">ВВЕРХ</a>  
</div>	

Для WordPress
этот код лучше поместить в файл header.php
После этого скрипт уже будет работать и его можно проверить на деле. Но для нормального отображения, нужно задать стили CSS.

2. Подключение стилей CSS.

В конец файла стилей вставить следующий код:
Для WordPress
это файл style.css

 
/*-----------------Возврат к верху----------------------*/
#back-top {
	position: fixed;
	bottom: 0px;
    padding: 0px;
    left: 50%;	
	margin-left: 500px;
	z-index:99991;
	}
#back-top a{
	width: 77px;
	height: 30px;
	background: rgba(0, 0, 0, 0.25);
	display:block;
	text-decoration:none;
	-webkit-transition: all linear 0.2s; 
	-moz-transition: all linear 0.2s;
	-ms-transition: all linear 0.2s;
	-o-transition: all linear 0.2s;
	transition: all linear 0.2s;
	text-align: center;
	
	}

#back-top a:hover{
	height: 70px;
	background: #663399;
	-webkit-transition: all linear 0.2s; 
	-moz-transition: all linear 0.2s;
	-ms-transition: all linear 0.2s;
	-o-transition: all linear 0.2s;
	transition: all linear 0.2s;
	color: #fff;
	}

После вставки и сохранения, Ваша кнопка станет как и на моем сайте - внизу справа.
Стили можете настроить как хотите, и ваша кнопка будет радовать вас и ваших посетителей.

Кнопка jQuery

    (function($) {  
    $(function() {  
      
      $('#up').click(function() {  
        $('body,html').animate({scrollTop:0},500);  
        return false;  
      })  
      
    })  
    })(jQuery)  

0 - это отступ в пикселях, до какого места возвращаться.
500 - это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

Подключаем кнопу следующим кодом:

<div id="back-top">
  <a href="#" id="up">ВВЕРХ</a>  
</div>

также нужно подключить jQuery(если она у вас подключена, то этого делать не нужно.)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>	

Для WordPress
Подключаем все так же как и версию JavaScript выше и настраиваем стили.

На этом все. Спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий