JQuery는 단순히 앵커 link_jquery의 부드러운 스크롤을 구현합니다.

일반적으로 앵커 포인트를 사용하여 페이지의 지정된 위치로 이동하면 즉시 지정된 위치로 이동하지만 때로는 지정된 위치로 원활하게 전환하고 싶을 경우 JQuery를 사용하여 이를 간단히 달성할 수 있습니다. 효과. :

예를 들어 여기서는 3499910bf9dac5ae3c52d5ede7383485 태그를 클릭하여 콘텐츠 ID로 지정된 위치로 이동합니다.

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

그런 다음 원하는 위치에 콘텐츠로 ID가 포함된 콘텐츠 블록을 설정합니다. 여기서는 기사처럼 보이지 않는 기사를 시뮬레이션하기 위해 div를 사용합니다. 효과가 더 명확하게 보이도록 이 div를 뒤쪽에 배치하는 것이 가장 좋습니다. 이 효과를 테스트하려는 경우 간단하고 대략적인 방법을 사용하고 그 앞에 많은 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>

마지막으로 원활한 전환 효과를 얻기 위해 JQuery가 사용됩니다.

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

완료!

계속 개선해 나가겠습니다.

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

개선된 코드의 장점은 앵커 링크를 클릭하면 앵커 지점까지 원활하게 스크롤되며, 브라우저 URL 접미사에 앵커라는 단어가 포함되지 않는다는 점입니다. 사용 중 위 코드를 수정하지 않고도 구현할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.