News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

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: