HTML'de sayfa içi link verme

[leojely]

Bazı web sitelerinde sayfanın en sonuna gittiğimiz zaman sayfanın üstüne çık diye bir link görürüz ve bu linke tıkladığımızda web sayfasının üst bölümüne kısa yoldan çıkmış oluruz. Bu yapılan işlem html de sayfa içi link verme işlemidir. Şimdi yukarıda verdiğimiz örneğe göre bir tane uygulama yapalım. İlk olarak linke tıklandığı zaman sayfanın hangi konumuna gitmesini istiyorsak o konuma a name parametresi ile bir isim veriyoruz. Biz örneğimizde sayfanın en üstüne kısa yönden döneceğimiz için html sayfasının en üstüne aşağıdaki şekilde bir isim veriyoruz.

PHP Kod: Tümünü Seç Tümünü Kopyala

<a name="bastaraf"> 


daha sonra sayfanın en altına sayfanın üstüne çık diye bir yazı ekliyoruz ve bu yazıya link veriyoruz. Bu linki oluştururken adres olarak sayfanın başına verdiğimiz ismi yazıyoruz. Ayrıca bu ismin başına # işaretini koyuyoruz.

PHP Kod: Tümünü Seç Tümünü Kopyala

<a href="#bastaraf">sayfanın üstüne çık</a> 


Bu şekilde sayfalarımızda istediğimiz konumlara sayfa içi linki vermemiz mümkündür.

[yusufkoc]

Teşekkürler, yararlı bir konu olmuş.

[leojely]

Güncel

[L34DRi]

Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?

[Muratbaykam]

Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?

Animasyon eklenince oluyor onun için css yazabilirsiniz .

[leojely]

Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?

Kod: Tümünü Seç Tümünü Kopyala

$(window).scroll(function(){
    if ($(this).scrollTop() > 100)    // Sayfa ne kadar aşağı kayarsa buton görünsün. 100 sayısı = Kaydırma çubuğunun piksel konumu. Bu sayı değiştirilebilir.
        $("#yukari").fadeIn(500);    // Yukarı çık butonu ne kadar hızla ortaya çıksın. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
    else
        $("#yukari").fadeOut(500);    // Yukarı çık butonu ne kadar hızla ortadan kaybolsun. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
});
$(document).ready(function(){
    $("#yukari").click(function(){    // Yukarı çık butonuna tıklanıldığında aşağıdaki satır çalışır.
        $("html, body").animate({ scrollTop: "0" }, 500);    // Sayfa ne kadar hızla en yukarı çıksın.
        // 0 sayısı sayfanın en üstüne çıkılacağını belirtir.
        // 500 sayısı ne kadar hızla çıkılacağını belirtir. 500 milisaniye = 0,5 saniye. Bu sayı değiştirilebilir.
        return false;
    });
});

Bu JavaScript kodunu entegreleyin hocam @L34DRİ
Yukarı yazan kısmı bastaraf diye değiştirin.

[Hatake]

@L34DRi https://codepen.io/gokss/pen/Boyjrv böyle yapılıyor, CSS vb. ile alakası yok.

[leojely]

@L34DRi https://codepen.io/gokss/pen/Boyjrv böyle yapılıyor, CSS vb. ile alakası yok.

Arkadaş konuda ve verdiğim cevaptakiyle aynı yapıyı kullanmış..

[mehmetext]

jQuery ile, tıklanınca belirli yere nasıl gidilir peki?

[leojely]

jQuery ile, tıklanınca belirli yere nasıl gidilir peki?

Sadece jquery ile mi ?

[mehmetext]

jquery, html, css. javascript olmayacak.

[leojely]

jquery, html, css. javascript olmayacak.

Leadri hocama verdiğim yanıt jquery içeriyor. Text JavaScript tagı içine almanız yeterlidir çalışması için

[Hatake]

@L34DRi https://codepen.io/gokss/pen/Boyjrv böyle yapılıyor, CSS vb. ile alakası yok.

Arkadaş konuda ve verdiğim cevaptakiyle aynı yapıyı kullanmış..

Mesajını sonradan düzenlediğini de ekleseydin keşke. Ben cevabı yazdığım sıra bir css kodu yazıyordu orada.

[leojely]

@L34DRi https://codepen.io/gokss/pen/Boyjrv böyle yapılıyor, CSS vb. ile alakası yok.

Arkadaş konuda ve verdiğim cevaptakiyle aynı yapıyı kullanmış..

Mesajını sonradan düzenlediğini de ekleseydin keşke. Ben cevabı yazdığım sıra bir css kodu yazıyordu orada.

Düzenleme sebebim leadri hocamı etiketlemem içindi.
http://hakantasan.com/index/makaleler/86/jquery-ile-yukari-cik-butonu-yapmak/
Aldığım kodda burda CSS kodu felan yoktu orda..