Question

我写信给你是因为我对动画滚动到特定部分有问题。有谁知道我该如何解决？目前我跳到特定的部分，但不会慢慢下降。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

    <script type="text/javascript" src="js/custom.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <div id="sidebar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#section1">O Firmie <span class="sr-only">(current)</span></a></li>
            <li><a href="#section2">Flota</a></li>
            <li><a href="#section3">Oferta</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#section4">Kontakt:</a></li>
          </ul>
        </div>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div class="slider" id="section1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris 
    <br /><br /><br />
    </div>

    <div class="o_firmie" id="section2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo.  ac enim sit amet viverra.<br /><br /><br />
    </div>

    <div class="mapa" id="section3">
 finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
        </div>

    <div class="flota" id="section4">
  facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
    </div>

    <div class="footer" id="section5">
     malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
    </div>

JS代码：

 function goToByScroll(id){
          // Scroll
        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'slow');
    }

    $("#sidebar > ul > li > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
        e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });

这是我的现场演示：

http://jsfiddle.net/VPzxG/3022/

我该如何快速解决？

感谢您的回复人员

Answer 1

试试这个

function goToByScroll(id){
      // Scroll
    $('html,body').animate({
        scrollTop: $(id).offset().top
        },
        'slow');
}

$("#sidebar > ul > li > a").click(function(e) { 
      // Prevent a page reload when a link is pressed
    e.preventDefault(); 
      // Call the scroll function
    goToByScroll($(this).attr("href"));
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div id="sidebar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#section1">O Firmie <span class="sr-only">(current)</span></a></li>
        <li><a href="#section2">Flota</a></li>
        <li><a href="#section3">Oferta</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#section4">Kontakt:</a></li>
      </ul>
    </div>
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="slider" id="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris varius pellentesque aliquam. Nullam commodo urna orci, quis elementum magna venenatis eget. Mauris placerat neque enim, imperdiet scelerisque est consequat vitae. Sed nulla tellus, pulvinar non viverra eget, blandit id diam. Morbi sagittis, est ut elementum congue, ante risus vulputate eros, a fringilla lorem dolor et tellus. Curabitur elit ex, aliquet eu justo id, vulputate blandit enim. Curabitur egestas ac dolor nec ultrices. Aliquam ut ipsum vel nisl eleifend facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.
<br /><br /><br />
</div>

<!-- MODUŁ O FIRMIE -->

<div class="o_firmie" id="section2">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris varius pellentesque aliquam. Nullam commodo urna orci, quis elementum magna venenatis eget. Mauris placerat neque enim, imperdiet scelerisque est consequat vitae. Sed nulla tellus, pulvinar non viverra eget, blandit id diam. Morbi sagittis, est ut elementum congue, ante risus vulputate eros, a fringilla lorem dolor et tellus. Curabitur elit ex, aliquet eu justo id, vulputate blandit enim. Curabitur egestas ac dolor nec ultrices. Aliquam ut ipsum vel nisl eleifend facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
</div>


<div class="mapa" id="section3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris varius pellentesque aliquam. Nullam commodo urna orci, quis elementum magna venenatis eget. Mauris placerat neque enim, imperdiet scelerisque est consequat vitae. Sed nulla tellus, pulvinar non viverra eget, blandit id diam. Morbi sagittis, est ut elementum congue, ante risus vulputate eros, a fringilla lorem dolor et tellus. Curabitur elit ex, aliquet eu justo id, vulputate blandit enim. Curabitur egestas ac dolor nec ultrices. Aliquam ut ipsum vel nisl eleifend facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
	</div>

<div class="flota" id="section4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris varius pellentesque aliquam. Nullam commodo urna orci, quis elementum magna venenatis eget. Mauris placerat neque enim, imperdiet scelerisque est consequat vitae. Sed nulla tellus, pulvinar non viverra eget, blandit id diam. Morbi sagittis, est ut elementum congue, ante risus vulputate eros, a fringilla lorem dolor et tellus. Curabitur elit ex, aliquet eu justo id, vulputate blandit enim. Curabitur egestas ac dolor nec ultrices. Aliquam ut ipsum vel nisl eleifend facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
</div>

<div class="footer" id="section5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae elit non ipsum volutpat commodo nec eget odio. Vestibulum ut enim leo. Mauris varius pellentesque aliquam. Nullam commodo urna orci, quis elementum magna venenatis eget. Mauris placerat neque enim, imperdiet scelerisque est consequat vitae. Sed nulla tellus, pulvinar non viverra eget, blandit id diam. Morbi sagittis, est ut elementum congue, ante risus vulputate eros, a fringilla lorem dolor et tellus. Curabitur elit ex, aliquet eu justo id, vulputate blandit enim. Curabitur egestas ac dolor nec ultrices. Aliquam ut ipsum vel nisl eleifend facilisis ac faucibus purus. Praesent eleifend nisi nulla, vitae imperdiet nulla rhoncus quis. Nunc vel lacus sapien. Curabitur euismod augue et sem malesuada finibus. Integer malesuada, ante vitae auctor accumsan, quam eros maximus risus, vitae sollicitudin justo magna porttitor augue. Quisque facilisis ac enim sit amet viverra.<br /><br /><br />
</div>

滚动到div（慢滚动动画）JQuery

1 个答案: