scroll - 单击锚点时防止滚动/跳转

Question

我正在使用带有 css 的图像库/滑块，并且由于 id 的原因，页面会跳转到图像所在的位置。前任。 http://www.respasalon.com/blog-test.php

<div id="image-slider">
<div id="slide-frame">
<img src="img/reverseclock.jpg" alt="" />
<div id="slides">
  <img id="slide1" src="img/reverseclock.jpg" alt="" />
  <img id="slide2" src="img/reverseclock2.jpg" alt="" />
  <img id="slide3" src="img/reverseclock3.jpg" alt="" />

</div>
</div>
<div id="navigation">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
</div>
</div> 

Answer 1

$(function(){
   $('#navigation a').click(function (evt) {
      evt.preventDefault();
      var contentId = $(this).attr('href');
      var content = $(document).find(contentId);
  $('html,body').animate({
    scrollTop: ($(content).offset().top},
  'slow');
}):

这将平滑滚动到 href 中提到的 div。

Answer 2

$(function(){
   $('#navigation a').click(function (evt) {
      // Put your logic here
      evt.preventDefault();
  })
});