Question

我需要一个代码来顺利滚动到div。我尝试了很多代码，但没有人工作。我不认为你理解。我会下载一个下载链接。 http://www58.zippyshare.com/v/XB5RjjId/file.html

#headercb {
  overflow: hidden;
  margin: 0 auto;
  display: block;
}
#navbar {
  width: 100%;
  margin: 0 auto;
  position: fixed;
}
h2.about {
  text-align: center;
  font-family: 'Righteous', cursive;
}
button.about {
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  color: white;
  font-family: Sans-serif;
  font-size: 20px;
  width: 100%;
  line-height: 60px;
  margin: 0 auto;
  text-align: center;
  border: 0;
  transition: all 0.8s ease 0s;
  font-family: 'Righteous', cursive;
  height: 100px;
  text-shadow: 0 0 15px #7c9630;
}
button:hover {
  background: #7c9630;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 37px 50px 0 rgba(0, 0, 0, 0.7);
}
button.about:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 15px;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
p.despre {
  margin: 0 auto;
}
.pg2.col-sm-3 {
  padding-right: 70px;
}
.pg3.col-sm-3 {
  padding-left: 70px;
}
#content1pg1 {
  margin: 0 auto;
  width: 100%;
  height: 500px;
  background-image: url('poza11.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin-top: 30px;
}
h2.content1pg1 {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 120px;
  display: block;
  font-family: 'Lobster Two', cursive;
  font-size: 40px;
}
p.content1pg1 {
  color: white;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  font-size: 20px;
  padding-top: 120px;
  width: 70%;
}

<html>

<head>
  <link rel="shortcut icon" href="clg.png" />
  <title>Restaurant cu specific romanesc si italian in Bucuresti</title>
  <link rel="stylesheet" href="cb.css">
  <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
</head>

<body>
  <div id="navbar">
    <div class="row">
      <div class="col-sm-3 pg1">

        <a href="#content1pg1">
          <button type="button" class="about">DESPRE RESTAURANT</button>
        </a>

      </div>
      <div class="col-sm-3 pg2">
        <button type="button" class="about">EVENIMENTE</button>

      </div>

      <div class="col-sm-3 pg3">
        <button type="button" class="about">CONTACT SI REZERVARI</button>

      </div>
      <div class="col-sm-3 pg4">
        <button type="button" class="about">GALERIE FOTO</button>

      </div>
    </div>
  </div>
  <div id="headercb">
    <img class="headerlogo" src="cg.png">

  </div>

  <div id="content1pg1">
    <h2 class="content1pg1">Restaurant cu specific romanesc si italian

</h2> 
    <p class="content1pg1">Bine ati venit la Celebration Garden! Veti gasi aici un festival de arome care sa va poarte departe de viata agitata a orasului. Va propunem o experienta speciala
  </div>
</body>

</html>

Answer 1

尝试查看jQuery.animate()。下面是一个示例，您可以从顶部滚动400个单位。

$("body, html").animate({
  scrollTop: 400
}, 800);

Answer 2

＆＃13;

<script>
$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".about").offset().top},
        'slow');
});
</script>

＆＃13;

看这里：https://jsfiddle.net/00vmkcLu/

Answer 3

这是一个工作示例

使用此脚本并小心重命名脚本中的id。在此示例中，click-event被附加为$("#navbarlist a").click(function(evn)

＆＃13;

$.scrollTo = $.fn.scrollTo = function(x, y, options){
    if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);

    options = $.extend({}, {
        gap: {
            x: 0,
            y: 0
        },
        animation: {
            easing: 'swing',
            duration: 600,
            complete: $.noop,
            step: $.noop
        }
    }, options);

    return this.each(function(){
        var elem = $(this);
        elem.stop().animate({
            scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
            scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y
        }, options.animation);
    });
};

////////////////////////////////////////////////////////////////////////////////////////////
// Smooth Scrolling                                                                       //
////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
    /**
     * This part causes smooth scrolling using scrollto.js
     * We target all a tags inside the nav, and apply the scrollto.js to it.
     */
    $("#navbarlist a").click(function(evn){
        evn.preventDefault();
        $('html,body').scrollTo(this.hash, this.hash);
    });
});

＆＃13;

#about-section{
  height:700px;
  width:100%;
  background-color:green;
}
#about-section{
  height:700px;
  width:100%;
  background-color:green;
}
#portfolio-section{
  height:700px;
  width:100%;
  background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="navbarlist">
            <li><a href="#about-section">About</a></li>
            <li><a href="#portfolio-section">Projects</a></li>
          </ul>
  </div>

<div id="about-section">
</div>
<div id="portfolio-section">
</div>

＆＃13;

按下按钮时平滑滚动到段落

3 个答案: