Rumah > hujung hadapan web > tutorial js > JQuery hanya melaksanakan tatal lancar pautan anchor_jquery

JQuery hanya melaksanakan tatal lancar pautan anchor_jquery

WBOY
Lepaskan: 2016-05-16 16:01:37
asal
1733 orang telah melayarinya

Secara amnya, apabila menggunakan titik anchor untuk melompat ke kedudukan yang ditentukan pada halaman, ia akan melompat ke kedudukan yang ditentukan dengan serta-merta Tetapi kadang-kadang kita mahu dengan lancar beralih ke kedudukan yang ditentukan, maka kita boleh menggunakan JQuery untuk mencapai ini kesan. :

Sebagai contoh, di sini kita akan melompat ke lokasi yang ditentukan dengan id kandungan dengan mengklik teg

<a id="turnToContent" href="#content"></a>
Salin selepas log masuk

Kemudian, kami menetapkan blok kandungan dengan id sebagai kandungan di lokasi yang kami mahu Di sini, div digunakan untuk mensimulasikan artikel yang tidak kelihatan seperti artikel. Sebaik-baiknya letakkan div ini di belakang supaya kesannya lebih jelas Jika anda hanya ingin menguji kesan ini, anda boleh menggunakan kaedah yang mudah dan kasar dan meletakkan banyak tag

<div id="content">
<h2>
<a href="###">HTML5</a>
</h2>
<p>
html5html5html5
</p>
<p class="addMes">标签: <span>HTML5</span><small>2015年4月19日</small></p>
</div>
Salin selepas log masuk

Akhir sekali, JQuery digunakan untuk mencapai kesan peralihan yang lancar:

$('#turnToContent').click(function () {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Salin selepas log masuk

Selesai!

Mari kita terus memperbaikinya,

$(function(){  
  $('a[href*=#],area[href*=#]').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) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
        1000);
        return false;
      }
    }
  });
})
Salin selepas log masuk

Kelebihan kod yang dipertingkatkan ialah mengklik pautan sauh akan menatal dengan lancar ke titik sauh, dan akhiran URL penyemak imbas tidak mempunyai perkataan sauh Ia boleh dilaksanakan tanpa mengubah suai kod di atas semasa digunakan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan