News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

SMF için Yukarı Git Butonu Yapma

Started by fatyhxd41, October 29, 2013, 04:33:04 AM

Previous topic - Next topic

fatyhxd41

Merhabalar arkadaşlar. Yabancı bir sitede bulduğum bu tutorial'i sizlerle de paylaşayım dedim.

Konunun asıl içerik sahibi idesign360.com'dur.
(Original author of this tutorial is idesign360.com).

Adım 1: Temamızın index.css dosyasını açıyoruz ve en altına ekliyoruz:

.go-top  {
    position: fixed;
    bottom: 2em;
    right: 2em;
    text-decoration: none;
    color: #fff;
    background: #666;
    font-size: 14px;
    padding: 1em;
    display: none;
}
.go-top:hover {
    background: #333;
}


Adım 2: Temamızın index.template.php dosyasını açıyoruz ve şu bölümü buluyoruz:
<div id="footer">

Bunun hemen öncesine ekliyoruz:
<a href="javascript:void(0)" class="go-top">Yukarı Git</a>
Eğer siz butonda "Yukarı Git" kelimesi yerine bir resim eklemek istiyorsanız (yukarı ok vb.) buradaki Yukarı Git yazısının yerine resim kodunu ekleyebilirsiniz.

Adım 3: Tekrar index.template.php'de buluyoruz:
</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..


Hemen öncesine ekliyoruz:
    <!-- JavaScript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $(".go-top").fadeIn(200);
                } else {
                    $(".go-top").fadeOut(200);
                }
            });
           
            // Animate the scroll to top
            $(".go-top").click(function(event) {
                event.preventDefault();
               
                $("html, body").animate({scrollTop: 0}, 300);
            })
        });
    </script>


Şahsen ben beğendim. Kullandığım temada yukarı git butonu var fakat footer bölümünde yani sabit. Bu tutorialdeki gibi yaptım, gayet hoş gözüktü. Hem kafamıza göre butonu kişiselleştirebiliyoruz da. :)

YeniÇocuk

Uygulayan var mı? Çalışıyor mu ?


akaewn

Çalışması bir yana, hoca görünümü biraz düzenleekte fayda var

vbasic

Bu kadar uzatmaya gerek var mı ? bir text'e "siteadi.com/#top" uzantısı verdiğinizde sayfayı yukarı taşıyacaktır zaten.

arslanturk

#5
tşk.

SkyMee

Oynadıgım bir oyunun forumunda Yönetici hesabı olan arkadaşım var fakat forum ona ait değil.

bknz forum adresi: www.hirsizpolisrpg.com

Tam yetkili yönetici hesabıda yönetim bölümünden bunları ayarlayabilir mi

eyyupp

<a href="#yukari">YUKARI ÇIK</a>
direk bu link yeterli hareketli bir buton olsa aslında daha iyi olurdu sabit değilde
testleri çöz [nofollow] ilk adım ayakkabısı [nofollow]

D'ssConneTed


swerty111

Quote from: D'ssConneTed on February 10, 2018, 02:29:55 PM
En basit bu şekilde yapılır  bu linkte yer alıyor ..
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

teşekkür ederim gayet güzel çalışıyor ben denedim.

mgdesign

MEsajım bulunsun, bunu eklemek istiyorum bende

Advertisement: