在click / ul li / jQuery上顺利滚动

Question

我在“问答”部分遇到了麻烦。就像有4个问题，那就是链接。如果单击一个，“p”将向下滑动。等等。但是当我点击这个问题时，我希望页面向下或向上滚动（如顶部）。

$(function() {
  var $_openedFaq = null;


  function openFaq($__p) {
    $__p.slideDown();
  }


  function closeFaq($__p) {
    $__p.slideUp();
  }


  $('.faq ul li').each(function() {
    var $faq = $(this);
    var $p = $(this).find('p');


    $(this).find('a').click(function(e) {
      e.preventDefault();

      if ($_openedFaq != null) {
        closeFaq($_openedFaq.find('p'));

        $_openedFaq.find('a').removeClass("open");
      }


      if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
        openFaq($p);

        $_openedFaq = $faq;

        $p.prev('a').addClass("open");

      } else {
        $_openedFaq = null;
      }
    });
  });
});

   
.faq {
  background-color: #f5f5f5;
  padding-top: 65px;
  padding-bottom: 65px;
}

.faq div.container div.row div.col-sm-6 h1 {
  font-family: 'Source Serif Pro', serif;
  text-align: center;
  font-size: 60px;
  margin: 0;
  padding-bottom: 40px;
}

.faq div.container div.row div.col-sm-6 ul {
  list-style-type: none;
  padding: 0;
}

.faq div.container div.row div.col-sm-6 ul li {
  font-weight: bold;
  font-size: 14px;
  padding: 10px 10px;
  padding-top: 20px;
  border-bottom: 1px solid #bfbfbf;
  position: relative;
}

.faq div.container div.row div.col-sm-6 ul li:last-child {
  border-bottom: none;
}

.faq div.container div.row div.col-sm-6 ul li a {
  text-decoration: none;
  color: #4a4a4a;
  padding-right: auto;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a:hover {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a:hover::after {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a::after {
  content: "\e008";
  font-family: "road-trip-project-icons";
  color: #f9b40a;
  position: absolute;
  top: 20px;
  right: 0;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a.open {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a.open::after {
  content: "\e007";
  font-family: "road-trip-project-icons";
  color: black;
  position: absolute;
  top: 20px;
  right: 0;
}

.faq div.container div.row div.col-sm-6 ul li p {
  font-weight: normal;
  display: none;
}

.faq div.container div.row div.col-sm-6 img {
  width: 100%;
}

.faq {
  padding-top: 200px;
  height: 750px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<section class="faq">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>Q&As</h1>
        <ul>
          <li>
            <a href="#">Question 1</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 2</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 3</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 4</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
        </ul>
      </div>
      <div class="col-sm-6">
        <img src="../includes/img/faqs.jpg" alt="Are you ready ?">
      </div>
    </div>
  </div>
</section>

因此，当您点击“问题1”时，我希望页面滚动，直到她与问题1完全匹配。抱歉，我的英语很糟糕^^

谢谢。

Answer 1

您可以通过以下方式收集每个元素li的偏移顶部：

var offset = $(this).offset().top;

然后为了顺利滚动使用这个：

$('html, body').animate({
     scrollTop: offset
}, 1000);

演示：

$(function() {
  var $_openedFaq = null;


  function openFaq($__p) {
    $__p.slideDown();
  }


  function closeFaq($__p) {
    $__p.slideUp();
  }


  $('.faq ul li').each(function() {
    var $faq = $(this);
    var $p = $(this).find('p');
    var offset = $(this).offset().top;

    $(this).find('a').click(function(e) {
      e.preventDefault();
      
 $('html, body').animate({
        scrollTop: offset
    }, 1000);
      
      if ($_openedFaq != null) {
        closeFaq($_openedFaq.find('p'));

        $_openedFaq.find('a').removeClass("open");
      }


      if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
        openFaq($p);

        $_openedFaq = $faq;

        $p.prev('a').addClass("open");

      } else {
        $_openedFaq = null;
      }
    });
  });
});

@charset "UTF-8";
@font-face {
  font-family: 'Conv_Besom';
  src: url("../font/Besom.eot");
  src: local("☺"), url("../font/Besom.woff") format("woff"), url("../font/Besom.ttf") format("truetype"), url("../font/Besom.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 500;
}

section {
  background-color: #f9b40a;
}


/* ################### */


/* ##### NAV BAR ##### */


/* ################### */

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  z-index: 1000;
}

@media only screen and (max-width: 740px) {
  header.navbar {
    background-color: black;
  }
}

header nav {
  position: absolute;
  top: 50%;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 40px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

header nav ul {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  padding-left: 20px;
  padding-right: 20px;
}

header nav ul+ul {
  border-left: 1px solid white;
}

@media only screen and (max-width: 740px) {
  header nav ul+ul {
    border: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

header nav ul li+li {
  margin-left: 25px;
}

header nav ul.menuIco li+li {
  margin-left: 12px;
}

header nav ul li a {
  text-decoration: none;
  color: white;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

header nav ul li a:hover {
  color: #f9b40a;
}

header nav ul.menuIco {
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

@media only screen and (max-width: 740px) {
  header nav ul.menuIco {
    background-color: #f9b40a;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
  }
}

header nav ul.menuIco li a:hover {
  color: black;
}

@media only screen and (max-width: 740px) {
  header nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    padding: 0;
    margin-top: 128px;
    width: 100%;
    border-top: 0.5px solid white;
    z-index: 5;
    background-color: black;
  }
}

@media only screen and (max-width: 740px) {
  header nav ul:first-child {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0;
    padding-left: 35px;
  }
}

@media only screen and (max-width: 740px) {
  header nav ul:first-child li {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 740px) {
  header nav ul:first-child li:first-child {
    margin-top: 20px;
  }
}

header h1 {
  margin: 0;
  margin-left: 50px;
}

header h1 a {
  display: block;
  text-decoration: none;
  color: white;
  text-indent: -6000px;
  background: url("../img/rtp-inline-w.svg") no-repeat;
  width: 149px;
  height: 22px;
}

@media only screen and (max-width: 740px) {
  header h1 {
    margin-left: 30px;
  }
}


/* ################## */


/* ##### SLIDER ##### */


/* ################## */

section div.slider {
  background: url("../img/banner.jpg") no-repeat center;
  background-size: cover;
  padding-top: 127px;
  padding-bottom: 65px;
  color: white;
  text-align: center;
  font-size: 35px;
  font-family: 'Source Serif Pro', serif;
  margin: auto;
  position: relative;
}

section div.slider::after {
  content: "";
  background: url("../img/eu-pin.svg");
  position: absolute;
  width: 29px;
  height: 39px;
  bottom: 40px;
  right: 40px;
}

section div.slider::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

section div.slider div.container {
  position: relative;
}

section div.slider div.container img {
  width: 200px;
}

.article {
  display: block;
}


/* ####################################### */


/* ##### APPLICATIONS ARE NOW CLOSED ##### */


/* ####################################### */

section div.closed {
  padding-bottom: 65px;
}

section div.closed div.row div.closed--container {
  margin-top: 65px;
}

section div.closed div.row div.closed--container h1 {
  font-family: 'Conv_Besom';
  padding: 0;
  margin: 0;
  margin-bottom: 50px;
  font-size: 40px;
  font-weight: normal;
  color: white;
}

section div.closed div.row div.closed--container img {
  width: 300px;
  display: block;
  margin: auto;
  padding-bottom: 40px;
}


/* ################## */


/* ##### FOOTER ##### */


/* ################## */

footer {
  background-color: #f9b40a;
  padding-top: 50px;
  padding-bottom: 55px;
  text-transform: uppercase;
}

footer div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

footer div p {
  font-size: 14px;
}

footer div p a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

footer div p:last-child {
  margin-left: 80px;
}

footer div p+p {
  margin-left: 35px;
}

footer div p.copyright {
  position: relative;
  padding-left: 42px;
}

footer div p.copyright::before {
  content: "";
  background: url("../img/eu-flag.svg");
  width: 33px;
  height: 22px;
  position: absolute;
  top: -3px;
  left: 0;
}

footer div p.mail {
  position: relative;
}

footer div p.mail::before {
  content: "\e004";
  font-family: "road-trip-project-icons";
  font-size: 45px;
  position: absolute;
  top: -18px;
  left: -50px;
}

footer div h1 {
  display: block;
  text-decoration: none;
  color: white;
  text-indent: -6000px;
  background: url("../img/rtp-inline-w.svg") no-repeat;
  width: 183px;
  height: 27px;
}

footer div.hashtag {
  font-size: 13px;
}

@media only screen and (max-width: 650px) {
  footer div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

footer ul {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 20px;
}

footer ul li a {
  display: block;
  text-decoration: none;
  color: white;
  font-size: 30px;
  background-color: black;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  position: relative;
}

footer ul li a i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

footer ul li+li {
  margin-left: 30px;
}


/* ##################### */


/* ##### HAMBURGER ##### */


/* ##################### */

button.hamburger {
  position: absolute;
  right: 15px;
  top: 6px;
  z-index: 5;
  visibility: hidden;
}

@media only screen and (max-width: 740px) {
  button.hamburger {
    visibility: visible;
  }
}


/* ##################### */


/* ##### TRIP LIST ##### */


/* ##################### */

section.triplist {
  padding-top: 65px;
  padding-bottom: 65px;
  background-color: white;
}

@media only screen and (max-width: 740px) {
  .route-item {
    margin-top: 50px;
  }
}

.route-item div.divIco {
  position: relative;
  padding-left: 35px;
  padding-right: 35px;
}

.route-item div.divIco img {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: auto;
}

.route-item div.divIco::before {
  font-family: "road-trip-project-icons";
  content: "\e006";
  position: absolute;
  font-size: 40px;
  top: 0;
  left: 30px;
  color: white;
  z-index: 2;
  background-color: black;
  text-align: center;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  line-height: 75px;
}

.route-item div {
  width: 100%;
}

.route-item div span.routesDate {
  display: block;
  text-align: center;
  margin-top: 25px;
  font-weight: bold;
}

.route-item div div {
  text-align: center;
}

.route-item div div a {
  text-decoration: none;
  font-family: 'Conv_Besom';
  color: black;
  font-size: 25px;
  line-height: 1.5em;
}

.route-item div span.startEnd {
  padding-left: 25px;
  position: relative;
  margin-top: 5px;
  display: block;
}

.route-item div span.startEnd::before {
  font-family: "road-trip-project-icons";
  content: "\e006";
  font-size: 17px;
  position: absolute;
  top: -2px;
  left: 0;
}

.route-item div span.startEnd span {
  font-weight: lighter;
}

.route-item p {
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: lighter;
}

.route-item a.button {
  display: block;
  width: 100%;
  height: 46px;
  text-decoration: none;
  color: white;
  text-align: center;
  background-color: black;
  line-height: 46px;
  border-radius: 23px;
  text-transform: uppercase;
}

.route-item.route-item--c01 a {
  color: #f9b40a;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.route-item.route-item--c01 a:hover {
  color: #b28004;
}

.route-item.route-item--c01 div.divIco::before {
  background-color: #f9b40a;
}

.route-item.route-item--c01 a.button {
  color: white;
  background-color: #f9b40a;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}

.route-item.route-item--c01 a.button:hover {
  background-color: #b28004;
}

.route-item.route-item--c01 span.startEnd::before {
  color: #f9b40a;
}

.route-item.route-item--c02 a {
  color: #1f7089;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.route-item.route-item--c02 a:hover {
  color: #113d4b;
}

.route-item.route-item--c02 div.divIco::before {
  background-color: #1f7089;
}

.route-item.route-item--c02 a.button {
  color: white;
  background-color: #1f7089;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}

.route-item.route-item--c02 a.button:hover {
  background-color: #113d4b;
}

.route-item.route-item--c02 span.startEnd::before {
  color: #1f7089;
}

.route-item.route-item--c03 a {
  color: #01c191;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.route-item.route-item--c03 a:hover {
  color: #017558;
}

.route-item.route-item--c03 div.divIco::before {
  background-color: #01c191;
}

.route-item.route-item--c03 a.button {
  color: white;
  background-color: #01c191;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}

.route-item.route-item--c03 a.button:hover {
  background-color: #017558;
}

.route-item.route-item--c03 span.startEnd::before {
  color: #01c191;
}

.route-item.route-item--c04 a {
  color: #97754f;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.route-item.route-item--c04 a:hover {
  color: #654e35;
}

.route-item.route-item--c04 div.divIco::before {
  background-color: #97754f;
}

.route-item.route-item--c04 a.button {
  color: white;
  background-color: #97754f;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}

.route-item.route-item--c04 a.button:hover {
  background-color: #654e35;
}

.route-item.route-item--c04 span.startEnd::before {
  color: #97754f;
}


/* ############### */


/* ##### FAQ ##### */


/* ############### */

.faq {
  background-color: #f5f5f5;
  padding-top: 65px;
  padding-bottom: 65px;
}

.faq div.container div.row div.col-sm-6 h1 {
  font-family: 'Source Serif Pro', serif;
  text-align: center;
  font-size: 60px;
  margin: 0;
  padding-bottom: 40px;
}

.faq div.container div.row div.col-sm-6 ul {
  list-style-type: none;
  padding: 0;
}

.faq div.container div.row div.col-sm-6 ul li {
  font-weight: bold;
  font-size: 14px;
  padding: 10px 10px;
  padding-top: 20px;
  border-bottom: 1px solid #bfbfbf;
  position: relative;
}

.faq div.container div.row div.col-sm-6 ul li:last-child {
  border-bottom: none;
}

.faq div.container div.row div.col-sm-6 ul li a {
  text-decoration: none;
  color: #4a4a4a;
  padding-right: auto;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a:hover {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a:hover::after {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a::after {
  content: "\e008";
  font-family: "road-trip-project-icons";
  color: #f9b40a;
  position: absolute;
  top: 20px;
  right: 0;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a.open {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a.open::after {
  content: "\e007";
  font-family: "road-trip-project-icons";
  color: black;
  position: absolute;
  top: 20px;
  right: 0;
}

.faq div.container div.row div.col-sm-6 ul li p {
  font-weight: normal;
  display: none;
}

.faq div.container div.row div.col-sm-6 img {
  width: 100%;
}

.faq {
  padding-top: 200px;
  height: 750px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<section class="faq">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>Q&As</h1>
        <ul>
          <li>
            <a href="#">Question 1</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 2</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 3</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
          <li>
            <a href="#">Question 4</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
          </li>
        </ul>
      </div>
      <div class="col-sm-6">
        <img src="../includes/img/faqs.jpg" alt="Are you ready ?">
      </div>
    </div>
  </div>
</section>

Answer 2

$(document).on('click', 'a[href^="#"]', function    (     (event) {
event.preventDefault();

$('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
}, 500);

});

href是目标的id