Sabit yukarı-aşağı butonu

Selam,

SMF2.1 için orta sol köşeye sabitlenmiş yukarı-aşağı butonu.  Basit ama kullanışlı



temanın index.css dosyasında en alt satırdan sonrasına aşağıda ki kodlar eklenecek

Kod Seç Genişlet

#gotop, #gobottom {
position: fixed;
bottom: 50%;
left: 0;
z-index: 9;
padding: 1.286em 0.1em 0 0.1em;
height: 3em;
font-weight: bold;
font-size: 2em;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border: 1px solid;
border-bottom: none;
border-radius: 0 20px 0 0;
}

#gobottom {
top: 50%;
padding: 0.8em 0.1em 0.5em 0.1em;
border-top: none;
border-radius: 0 0 20px 0;
}

#gotop:hover, #gobottom:hover {
text-decoration: none;
}


#top {
position: absolute;
top: -10em;
left: 3em;
padding: 1em 2em;
background: none repeat scroll 0 0 #ffffff;
font-weight: bold;
transition: top .5s ease-out 0s, background 1s linear 0s;
border: 4px solid;
border-radius: 0 0 6px 6px;
z-index: 200;
}

#top:focus {
top: -4px;
}


@media screen and (max-width: 44.950em) {


#gobottom, #gotop {
display: none;
padding-right: 0.25em;
border: 1px solid;
}

#gobottom {
border-radius: 0;
}

#gotop {
border-radius: 0 0.5em 0 0;
}

#gotop:hover, #gobottom:hover {
text-decoration: none;
}

}


index.template.php dosyasında  satır 194 sonrasına aşağıdaki kodlar eklenecek

Kod Seç Genişlet

echo '

<a href="#top" id="gotop" title="', $txt['go_up'], '">&#8593;</a>
<a href="#bot" id="gobottom" title="', $txt['go_down'], '">&#8595;</a>';
yine index.template.php  dosyasında satır 414 < div id="footer" >  kodunun yanına aşağıda ki kod eklenecek

Kod Seç Genişlet

<a id="bot"></a>


Kodlar elkarte (https://www.elkarte.net/) temasından alınmıştır.

smf tabanlı forum scripti elkarte epeydir bakmıyordum bide ikimiz çeviri ekibindeyiz çeviriye katkıda bulunuyormusun @gevv

evet hocam baya bir çeviri yaptım o zamanlar ekip de hızlıydı   sonrasında duruldular fazla gelişme olmadı

Selam,

SMF2.1 için orta sol köşeye sabitlenmiş yukarı-aşağı butonu.  Basit ama kullanışlı

Merhaba bunu bir temada kulandım elinize sağlık örnek verdiğiniz temada ki gibi değildi onuda ben tamamlayım dedim bu js yi yazdım kullanmak isteyen kodları theme.js dosyasına eklesin.

Kod Seç Genişlet

$(function () {
$('#gobottom').click(function ()
{ $('html, body').animate({ scrollTop: $(document).height() }, 1500); return false; }); $('#gotop').click(function () { $('html, body').animate({ scrollTop: '0px' }, 1500); return false; }); });