Poga “Uz augšu” jūsu WordPress lapā
Noteikti pārvietojoties Internet tiklā redzējāt pogu “uz augšu” jeb “To Top”, kura pārvieto weblapas apmeklētāju no lapas apakšas uz pašu augšu.
Šajā rakstā būs paskaidrots, kāda veida tādu pogu var iestrādāt jūsu WordPress mājaslapā ja tā nepastāv, bet ir nepieciešama uz tiki.lv Weblapas piemēra.
Poga “uz augšu” pēc būtības ir vienkārši <a> tipa saite, kas pārvieto apmeklētāju uz lapas sakumu.
Tāpēc šī saite ir ļoti vienkārši iestādāmā mājas lapa apakšā ar sekojošo kodu:
... <a class="anchor" href="#"></a> ...
Šo rindu pievienojam footer.php skriptam un pa lielam poga “uz augšu” mums jau strādās. Lai šī <a> tipa saite izskatītos pēc pogas ir nepieciešams pievienot dažas .css faila rindas:
#footer a.anchor {
position: absolute;
right: 15px;
top: -2px;
width: 20px;
height: 20px;
background: url('http://www.tiki.lv/wp-content/uploads/footer_anchor.png') 0 0 no-repeat;
display: block;
text-decoration: none;
}
Izpildot šos soļus mēs jau redzēsim strādājošu pogu, bet vienīgais trūkums tai pogai būs tāds, ka tā pārvietos apmeklētājus uz weblapas augšu momentāli un strauji, bet mēs taču gribam, lai tas notiktu lēni un slīdņveidīgi.
Lai panāktu sekojošu efektu mums ir nepieciešams izmantot javascript:
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-40);
timeOut=setTimeout('scrollToTop()',20);
}
else clearTimeout(timeOut);
}
Šo skriptu saglabājam pie child tēmas failiem, piemēram “js” mapē ar nosaukumu “top.js”. Kad tas ir izdarīts, varam inicializēt šo skriptu ierakstot sekojošas rindas functions.php failā:
if(!function_exists("mate_scripts")) {
function mate_scripts() {
if( is_admin() )
return;
$template_url = get_template_directory_uri(); // if theme is used
$child_theme_url = get_stylesheet_directory_uri(); // if child theme is used
wp_register_script( '1.7.1', $script_directory. '/js/jquery-1.7.1.js', 'jquery');
wp_register_script( 'top', $script_directory. '/js/top.js', 'jquery');
wp_enqueue_script('1.7.1');
wp_enqueue_script('top');
} }
add_action('init', 'mate_scripts');
Lai skripts strādātu ir nepieciešama jquery bibliotēka, tāpēc pirmkārt inicializējam to.
Kad tas tika izdarīts, tad drusku jāpamaina <a> saites kodu uz:
... <a class="anchor" href="#" onClick="scrollToTop();return false"></a> ...
Pie mūsu saites nospiešanas mēs izsaucam funkciju “scrollToTop”, kura ir aprakstīta top.js failā.
Ja ir nepieciešams paātrināt vai palēnināt slīdošo efektu, tad varat paspēlēties ar timeOut vērtību top.js skriptā.
Atbildēt
Vēlies pievienoties diskusijai?Jūtieties brīvi, lai veicinātu!