javascript - JQUERY "Click to scroll"单击任何内容时都会返回到顶部

Question

如果我点击“CV”，它将滚动到该页面。如果我点击链接或照片，它会不断滚动回到页面顶部。

    // When the Document Object Model is ready
jQuery(document).ready(function(){
    // 'thisCVTopPosition' is the amount of pixels #thisCV
    // is from the top of the document
    var thisCVTopPosition = jQuery('#thisCV').offset().top;
    // When #scroll is clicked
    jQuery('#cv').click(function(){
        // Scroll down to 'thisCVTopPosition'
        jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
        // This stops the anchor link from acting like a normal anchor link
        return false;
    });
    jQuery('#thisCV').parent().click(function(){
        jQuery('html, body').animate({scrollTop:1}, 'fast');
        return false;
    })
});

我的导航栏:

<div id="sidebar-wrapper">
      <center>
        <ul class="sidebar-nav">
          <li class="logo"><a href="#Home" class="scroll"><img src="img/logo2.png" alt=
          "Portfollio" /></a></li>

          <li style="list-style: none; display: inline">
            <div class="animation">
              <div class="hoverImages" align="center"><img src="img/photo.jpeg" alt=
              "Photo" style="width:auto;height:auto;" /></div>
            </div>
          </li>

          <li><a href="#Home" id = "home">Home</a></li>

          <li><a href="#CV" id="cv">CV</a></li>

          <li><a href="#Projects" id="projects">My Projects</a></li>

          <li><a href="#Github" id="github">GitHub</a></li>

          <li><a href="contact.php">Contact Me</a></li>
        </ul>
      </center>
    </div>

简历

`   <div id="page-content-wrapper">
        <div class="container-fluid">
        <div id="thisCV" style="height: 1000px; width 100px">

              <h1>My CV</h1>
        [...]

`是我的div还是jquery？更新:修复了我的 div，但它仍然无法正常工作。

Answer 1

anchor 元素有一个默认操作:转到其 href url。当 href 属性未设置(或有效，我相信)时，默认操作是刷新页面(并转到顶部)。

这可能就是您所遇到的情况。您可以使用 jQuery 的 event.preventDefault() 来防止任何事件触发其默认操作 ( jQuery docs ):

jQuery('#cv').click(function(event){
    // Prevent the click from loading href
    event.preventDefault();

    // Scroll down to 'thisCVTopPosition'
    jQuery('html, body').animate({scrollTop:thisCVTopPosition}, 'fast');
    // This stops the anchor link from acting like a normal anchor link
    return false;
});