Как да добавите бутон за връщане най-горе в страницата в WordPress без да използвате плъгин

бутон back to top

Здравейте, приятели! Бутон back to top който се появява при скролиране на долу в страницата и позволяват с един клик бързо да се върнете най-горе в страницата е доста полезен. Повярвайте ми, вашите читатели ще го оценят, особено ако страниците ви са доста обемисти и дълги.

Ето как ще изглежда бутона във вашия сайт:

back to top

Може да промените цвета и големината на бутона според вашите предпочитания.

Първо свалете файлове style.php, footer.php и header.php и ги запазете на вашия компютър. В случай, че нещо се обърка, ще може да качите оригиналните файлове.

И така, ето как може да добавите бутон back to top във вашия WordPress блог без да използвате плъгин:

  1. Поставете този css код във style.css файла на вашата активна тема:
/*--------------------------------------------------------------
Back to top script
--------------------------------------------------------------*/
.crunchify-top:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}
 
.crunchify-top {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 3.2rem;
height: 3.2rem;
line-height: 3.0rem;
font-size: 1.4rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
border-radius: 3.2rem;
text-align: center;
cursor: pointer;
}
  • Може да сменяте цвета на стрелката когато се посочва с мишката във ред: color: #fff !important; Променяйте в кода само fff.
  • Може да променяте цвета на самия бутон когато се посочи със мишката в този ред: background-color: #ed702b; Променяйте в кода само ed702b.
  • Големината на самия бутон може да променяте във тези редове: width: 3.2rem; height: 3.2rem; Променяйте в кода само числата 3.2.
  • Големината на стрелката може да промените във ред: font-size: 1.4rem; Променяйте в кода само числата 1.4.
  • Цвета на стрелката когато не е посочена със мишката може да промените в ред: color: #fff; Променяйте в кода само fff
  1. Поставете този код във във файл header.php на активната ви тема:
<!-- Scroll to Top Script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</script>
 
<script>            
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.crunchify-top').fadeIn(duration);
} else {
jQuery('.crunchify-top').fadeOut(duration);
}
});
 
jQuery('.crunchify-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
  • Във ред var offset = 220; може да променяте кога да се появява бутона. Колкото по-голямо число напишете, толкова по-ниско ще трябва да се мести надолу във страницата, преди да се покаже бутона. В кода променяйте само числото 220.
  • Във ред var duration = 500; може да промените скоростта със която се връщате най-горе във вашата страница, след като се натисне бутона. По-голямо число, означава по-бавно придвижване на горе и обратно, ако поставите по-малко число, придвижването на горе ще е по-бързо. Променяйте в кода само числото 500.
  1. Отворете файл footer.php на вашата активна тема и поставете във него този код:
<a href="#" class="crunchify-top">↑</a>

Може да го поставите кода пред закриващия таг </body>:

back to top code

Може да видите как изглежда бутона за връщане най-горе във страницата във моя блог от дясно.

Ако се страхувате да бъркате във кода на вашата тема, може да използвате плъгин за създаване на бутон със такава функционалност. Например Scroll to Top Button.

За днес това е всичко, приятели! Надявам се, че тази статия ще ви помогне да добавите бутон back to top за връщане най-горе във вашия блог.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *