Question

如果我点击＆＃34; CV＆＃34;它将滚动到该页面。如果我点击链接或照片，它将继续滚动回到页面顶部。

    // 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网址。如果未设置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;
});

JQUERY＆＃34;点击滚动＆＃34;点击任何东西时都会回到顶部

1 个答案: