Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
HTML'de sayfa içi link verme
#1
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:
<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:
<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.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler, yararlı bir konu olmuş.
Cevapla PGM
Teşekkür verenler:
#3
Güncel
Ara
Cevapla PGM
Teşekkür verenler:
#4
Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#5
(26-07-2017 Saat: 17:28)L34DRi Nickli Kullanıcıdan Alıntı: Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?

Animasyon eklenince oluyor onun için css yazabilirsiniz .
Bana ulaşmak için / http://english.10tl.net

MybbPHPVB.NETHTMLCSS MySQL                                    

Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir. 
Cevapla PGM
Teşekkür verenler:
#6
(26-07-2017 Saat: 17:28)L34DRi Nickli Kullanıcıdan Alıntı: Peki bunu aniden değil de yavaşça çıkacak şekilde nasıl yaparız ?
Kod:
$(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.
Ara
Cevapla PGM
Teşekkür verenler:
#7
@L34DRi https://codepen.io/gokss/pen/Boyjrv böyle yapılıyor, CSS vb. ile alakası yok.
Ara
Cevapla PGM
Teşekkür verenler:
#8
(26-07-2017 Saat: 17:36)metehandurmus Nickli Kullanıcıdan Alıntı: @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ış..
Ara
Cevapla PGM
Teşekkür verenler:
#9
jQuery ile, tıklanınca belirli yere nasıl gidilir peki?
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#10
(26-07-2017 Saat: 18:17)kraljmehmet Nickli Kullanıcıdan Alıntı: jQuery ile, tıklanınca belirli yere nasıl gidilir peki?
Sadece jquery ile mi ?
Ara
Cevapla PGM
Teşekkür verenler:
#11
jquery, html, css. javascript olmayacak.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#12
(26-07-2017 Saat: 18:22)kraljmehmet Nickli Kullanıcıdan Alıntı: 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
Ara
Cevapla PGM
Teşekkür verenler:
#13
(26-07-2017 Saat: 17:39)leojely Nickli Kullanıcıdan Alıntı:
(26-07-2017 Saat: 17:36)metehandurmus Nickli Kullanıcıdan Alıntı: @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.
Ara
Cevapla PGM
Teşekkür verenler:
#14
(26-07-2017 Saat: 18:32)metehandurmus Nickli Kullanıcıdan Alıntı:
(26-07-2017 Saat: 17:39)leojely Nickli Kullanıcıdan Alıntı:
(26-07-2017 Saat: 17:36)metehandurmus Nickli Kullanıcıdan Alıntı: @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..
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping