JQuery hanya melaksanakan tatal lancar pautan anchor_jquery

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 3499910bf9dac5ae3c52d5ede7383485

<a id="turnToContent" href="#content"></a>

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 e388a4556c0f65e1904146cc1a846bee

<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>

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;
});

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;
      }
    }
  });
})

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.