jQuery - Animate滚动到部分页面

时间：2017-02-07 21:38:58

标签： javascript jquery html

我一直在我的个人网站上工作，但菜单有问题。 Web site in progress

使用jQuery我试图为网站的主菜单设置动画，假设当点击其中一个链接时，主容器的内容应该移动到相应的部分，但这不会发生，它只有在第一次单击其中一个链接时才能正确链接，然后一切都失败。

我知道问题出在jQuery上，但我对这个库真的很新，我无法确定问题。

感谢您的帮助。

＆＃13;
＆＃13; 
$(document).ready(function() {
    $('.scroll-to').on('click', function(event){
      event.preventDefault();
      var sectionID = $(this).attr("data-id");
      scrollToID('#' + sectionID, 750);
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 150;
    var targetOffset = $(id).offset().top - offSet;
    $('.main_content, .principal_content').animate({scrollTop:targetOffset}, speed);
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/resume.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  <script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script lenguage="javascript" src="js/script.js" type="text/javascript"></script>-->
  <title>Jorge Cortés - Front-end Development</title>
</head>
<body>
  <div class="main_content">
    <header class="header_content">
    </header>

    <nav class="navigation_content">
      <div class="profile_card">
        <div class="profile_img">
          <img src="img/image.png" alt="Jorge">
        </div>
      </div>
      <ul class="menu">
        <li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
        <li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
        <li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
        <li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
      </ul>
    </nav>

    <main class="principal_content">
      <section class="about_me" id="about_me">
        <h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
        <div class="separator_light"></div>
        <p>I have two years experience as a web/interface developer.
           I have a taste <br> of clean, elegant styling, and I have lots of experience in the
           production of HTML <br> and CSS code for websites.
        </p>
        <!--<p>Futhermore I have experience using JS libraries and writing JS code,
           and I have a reasonable grasp of using CMS, specifically Joomla and WordPress.
        </p>-->

        <h2>Personal Info</h2>
        <div class="separator_bold"></div>
        <ul class="personal_info">
          <li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
          <li><em>Date of Birth</em><span>May 26, 1993</span></li>
          <li><em>e-mail</em><span>jorgecortesalvarez@outlook.com</span></li>
          <li><em>Phone</em><span>(+57) 300 433 8040</span></li>
          <li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
        </ul>
      </section>

      <section class="experience" id="experience">
        <h2>Work History</h2>
        <div class="separator_bold"></div>
        <h3>Platform Administrator OJS</h3>
        <h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena <br>
            <i class="fa fa-calendar"></i>2015 - 2016</h4>
        <p>Customization of the user's interface, configuration and support
          of the platform Open Journal Systems (OJS) for the virtual publication
          of the Palobra Journal in the University of Cartagena.
        </p>

        <h3>Front-end Web Developer</h3>
        <h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed <br>
            <i class="fa fa-calendar"></i>2014 - Today</h4>
        <p>Experience in the design and development of web sites using
          techonologies as HMTL5, CSS3, JS and content management systems
          as Joomla and WordPress.
        </p>
      </section>

      <section class="education" id="education">
        <h2>Academic History</h2>
        <div class="separator_bold"></div>
        <h3>Systems Engineer</h3>
        <h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena <br>
            <i class="fa fa-calendar-o"></i>2016</h4>
        <p></p>
        <h3>Secondary Education</h3>
        <h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social <br>
            <i class="fa fa-calendar-o"></i>2009</h4>
      </section>
      <section class="skill" id="skill">
        <h2>Development Skills</h2>
        <div class="separator_bold"></div>
        <ul>
          <li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
          <li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
          <li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
          <li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
          <li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
        </ul>

      </section>
    </main>
    <div class="social_media">
      <p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
      <a href="https://www.instagram.com/jorgecortesalvarez/" target="_blank"><i class="fa fa-instagram"></i></a>
      <a href="https://twitter.com/JorgeCortesR" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="https://www.linkedin.com/in/jorgecortesalvarez/" target="_blank"><i class="fa fa-linkedin"></i></a>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您的代码中缺少某些样式，我已经更改了一些代码，并且我还添加了一些样式以使principal_content div可滚动。您的代码只是第一次工作，因为当时滚动的值为0，您需要将当前滚动值的值添加到计算中，这是公式：

section offset top - container offset top + scrollTop value of the container

以下是您的代码正常运行，但here you have a jsfiddle example更简洁：

$(document).ready(function() {
  
    var cont = $('.main_content .principal_content');
    var contOffset = cont.offset();
  
    // scroll function
    function scrollToID(id, speed){
        var targetOffset = $(id).offset().top - contOffset.top + cont.scrollTop();
        cont.animate({scrollTop: targetOffset}, speed);
    }
  
    $('.scroll-to').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
});
html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

.menu {
    background: #CCC;
    height: 25px;
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block;
}

.main_content {
    height: 100%;
}

.principal_content {
    height: 100%;
    overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jorge Cortés - Front-end Development</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
    <script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script lenguage="javascript" src="js/script.js" type="text/javascript"></script>      
</head>
<body>
    <div class="main_content">

        <nav class="navigation_content">
            <ul class="menu">
                <li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
                <li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
                <li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
                <li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
            </ul>
        </nav>

        <main class="principal_content">
            <section class="about_me" id="about_me">
                <h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
                <div class="separator_light"></div>
                <p>I have two years experience as a web/interface developer.
           I have a taste <br> of clean, elegant styling, and I have lots of experience in the production of HTML <br> and CSS code for websites.
                </p>
                <h2>Personal Info</h2>
                <div class="separator_bold"></div>
                <ul class="personal_info">
                    <li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
                    <li><em>Date of Birth</em><span>May 26, 1993</span></li>
                    <li><em>e-mail</em><span>jorgecortesalvarez@outlook.com</span></li>
                    <li><em>Phone</em><span>(+57) 300 433 8040</span></li>
                    <li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
                </ul>
            </section>

            <section class="experience" id="experience">
                <h2>Work History</h2>
                <div class="separator_bold"></div>
                <h3>Platform Administrator OJS</h3>
                <h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena<br><i class="fa fa-calendar"></i>2015 - 2016</h4>
                <p>Customization of the user's interface, configuration and support of the platform Open Journal Systems (OJS) for the virtual publication of the Palobra Journal in the University of Cartagena.
                </p>
                <h3>Front-end Web Developer</h3>
                <h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed<br><i class="fa fa-calendar"></i>2014 - Today</h4>
                <p>Experience in the design and development of web sites using techonologies as HMTL5, CSS3, JS and content management systems as Joomla and WordPress.
                </p>
            </section>

            <section class="education" id="education">
                <h2>Academic History</h2>
                <div class="separator_bold"></div>
                <h3>Systems Engineer</h3>
                <h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena<br><i class="fa fa-calendar-o"></i>2016</h4>
                <p></p>
                <h3>Secondary Education</h3>
                <h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social<br><i class="fa fa-calendar-o"></i>2009</h4>
            </section>

            <section class="skill" id="skill">
                <h2>Development Skills</h2>
                <div class="separator_bold"></div>
                <ul>
                    <li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
                    <li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
                    <li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
                    <li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
                    <li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
                </ul>
            </section>

        </main>

        <div class="social_media">
            <p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
            <a href="https://www.instagram.com/jorgecortesalvarez/" target="_blank"><i class="fa fa-instagram"></i></a>
            <a href="https://twitter.com/JorgeCortesR" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="https://www.linkedin.com/in/jorgecortesalvarez/" target="_blank"><i class="fa fa-linkedin"></i></a>
        </div>

    </div>

</body>
</html>

答案 1 :(得分：0)

使用$（正文）而不是$（'。main_content，.principal_content'） 试试这个：

$(document).ready(function() {
       $('.scroll-to').on('click', function(event){
         event.preventDefault();
         var sectionID = $(this).attr("data-id");
         scrollToID('#' + sectionID, 750);
       });
       function scrollToID(id, speed){
              var offSet = 150;
              var targetOffset = $(id).offset().top - offSet;

              $('body').stop().animate({scrollTop:targetOffset},speed, 'swing');
          }
          if (typeof console === "undefined") {
              console = {
                  log: function() { }
              };
          }
    });
相关问题
最新问题