如何在没有外部插件的jQuery中制作一个滚动动画
如何在没有外部插件的jQuery中制作一个滚动动画
提问于 2016-04-18 07:10:31
我有一个i页网页。它工作很好，但没有滚动动画。我如何使它顺利滚动。现在它只是跳跃..。检查这个网址：marketing.html
div class="services-nav">
<ul>
<li class="scroll_btn"><a href="#service-0" data-offset="-200">business consulting</a></li>
<li class="scroll_btn"><a href="#service-1">product marketing</a></li>
<li><a href="#service-2">real estate</a></li>
<li><a href="#service-3">event management</a></li>
<li><a href="#service-4">healthcare</a></li>
<li><a href="#service-5">leagal consulting</a></li>
</ul>
</div>CSS
.services-nav {
position: fixed;
right: 0;
top: 250px;
z-index: 3;
}
.services-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.services-nav ul li {
background-color: #002E5B;
border: 1px solid #002E5B;
border-right: 0;
margin-bottom: 4px;
position: relative;
text-align: center;
}
.services-nav ul li a {
color: #fff;
text-transform: uppercase;
font-size: 11px;
display: block;
width: 100%;
height: 100%;
padding: 8px 20px 5px;
text-decoration: none;
}
.services-nav ul li:before {
right: 101%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
opacity: 0;
border-color: #61ADDF;
border-color: rgba(194, 225, 245, 0);
border-right-color: #61ADDF;
border-width: 0px;
margin-top: 0px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.services-nav ul li:hover {
background-color: #61ADDF;
border-left-color: transparent;
border-top: 1px solid #61ADDF;
border-bottom: 1px solid #61ADDF;
}
.services-nav ul li:hover:before {
opacity: 1;
border-width: 15px;
margin-top: -15px;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-18 07:50:01
最好在滚动和使用事件委托之前缓存$('html，'body')。
var $htmlBody = $('html, body');
$htmlBody.on('click', '.services-nav li a', function() {
var target = $(this).attr('href')
var offsetTop = $(target).offset().top || 0;
$htmlBody.animate({scrollTop: offsetTop}, 1500);
return false;
});Stack Overflow用户
发布于 2016-04-18 07:17:29
试试这个：
jQuery('.services-nav ul li a').click(function (e) {
e.preventDefault();
var obj = jQuery(this).attr('href');
jQuery('html, body').animate({
scrollTop: jQuery(obj).offset().top
}, 1000); // can change time duration
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36687471
复制相关文章
相似问题
腾讯云开发者
