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

-1

我需要一个代码，以平滑滚动到一个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>

来源

2016-12-16 EdiD' s Channel

请把你的代码codepen.io或jsfiddle.net。这里的人不太可能从这样的网站下载文件。 – Alic

这里是一个工作示例

使用该脚本，并小心重命名脚本的ID。在这个例子中点击事件attched因为这$("#navbarlist a").click(function(evn)

$.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); 
 
    }); 
 
});

#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; 
 
}

<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>

来源

2016-12-16 17:13:37 ab29007

谢谢你，但我需要把这个放在我的项目上。这是一个通用的代码 –

这不是通用 – ab29007

将脚本添加到您的文件 – ab29007

尝试看看jQuery.animate()。这里有一个例子，你可以从上面滚动400个单位。

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

来源

2016-12-16 17:03:37 Device

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

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

来源

2016-12-16 17:12:55

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

回答

相关问题