Tıklandığında <div> e giden link

181019

Decapat
Katılım
18 Ekim 2019
Mesajlar
108
Merhabalar,
Mesela ben bir iletişim formu oluşturdum ve bu sayfanın en altlarında olsun. En üstte de position: Fixed; bir menu container ı olsun ve butonda "İletişim" yazdığını farzedelim. Ben buna tıkladığımda sayfanın altında bulunan iletişim formuna gitmek istiyorum. Nasıl yapabilirim?
 
Son düzenleyen: Moderatör:

Ecmel

Kilopat
Katılım
26 Aralık 2020
Mesajlar
5.050
Makaleler
3
Çözümler
51
İletişim formunun divine id ver mesela "iletisim" diye. Yukardaki menude de oraya gitmek için bir a tagı oluştur ve href olarak "#iletisim" ver. İstediğin şeyi yapmış olursun.

İstersen JS ile animasyonlu bir şekilde gitmesini de sağlayabilirsin.
 

enesxq

Picopat
Katılım
9 Ekim 2021
Mesajlar
813
Makaleler
1
Hocam div'in idsi ile animate kullanarak scrollu oraya gönderebilirsin istediğin hızda,

ornek kod; butona basıldığında o dive gider
Js:
<script type="text/javascript">
  $(document).ready(function(){
      $('#butonidsi').click(function()
{
      $("#divid").animate({ scrollTop: $("#divid").attr("scrollHeight") }, 1500);
    });
  });
</script>
 

tuhana

Picopat
Katılım
28 Kasım 2021
Mesajlar
114
Çözümler
3
Yer
/home/tuhana
Arkadaşlar jQuery ya da VanillaJS ile soylemis ama olay duz HTML vs CSS ile kolayca halledilebilir.

index:
<!-- Gitmek istediginiz herhangi bir elemente id atayin. Ornek olarak: -->
<div id="about">
 <!-- ... -->
</div>

<!-- Ardindan a taginda href'e basina # getirerek gitmek istediginiz elemente verdiginiz idyi girin -->
<a href="#about">Hakkimda</>

<!-- Normalde animasyon yerine direkt olarak elemente gidecektir. Kaydirma animasyonu icin su css kodu yeterli olacaktir -->
<style>
 html {
   scroll-behavior: smooth;
 }
</style>
 

enesxq

Picopat
Katılım
9 Ekim 2021
Mesajlar
813
Makaleler
1
Arkadaşlar jquery ya da vanillajs ile soylemis ama olay duz HTML vs CSS ile kolayca halledilebilir.

index:
<!-- Gitmek istediginiz herhangi bir elemente id atayin. Ornek olarak: -->
<div id="about">
 <!-- ... -->
</div>

<!-- Ardindan a taginda href'e basina # getirerek gitmek istediginiz elemente verdiginiz idyi girin -->
<a href="#about">Hakkimda</>

<!-- Normalde animasyon yerine direkt olarak elemente gidecektir. Kaydirma animasyonu icin su css kodu yeterli olacaktir -->
<style>
 html {
 scroll-behavior: smooth;
 }
</style>

Öyle de olur.
 

Yeni konular

Yukarı