Bootstrap Hakkında

serkankuyu 1559 gün önce

686 defa görüntülendi

Sorunun başlığı nasıl olacağı hakkında fikrim yok. Şöyle ki;
yapmak istediğim arama özelliğinde bootstrap mantığı yapmak. Aşağıdaki linki tıkladığınızda "#" tagta belirtilen alana otomatik olarak gidiyor.

https://getbootstrap.com/docs/5.0/forms/overview/#form-text

Bunu javascript ile nasıl yapabilirim? Mantığını oturtamadım.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (2)

ilyasbilgihan

1557 gün önce

Aslında bir şey yapmana gerek yok html de böyle yönlendirme yapabiliyorsun zaten

<a href="#target">Hedefe git</a>

// Bişeyler..

<section id="target">
    <h1>Target</h1>
    <p>Target burası</p>
</section>

Daha yumuşak geçiş istersen html { scroll-behavior: smooth } ekle.
Detay için

#003262

qplot

1558 gün önce

<a class="git" href="index.php#kerimabdulcabbar">buna tıkla</a>

git diye class eklersın ve link sonuna gitmesini istedigin alanın id sını yazarsın #kerimabdulcabbar gibi

 sonra gidecek yere id verirsin id="kerimabdulcabbar"

<div id="kerimabdulcabbar">buraya gider</div>

jquery eklemeyı unutma sayfaya

$(function() {
 
  $('.git').click(function() {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);  
        return false;
      }
    }
  });
});

#003244