您的位置:首页 > 运维架构

scrollTop 滚动动画

2017-02-15 00:00 363 查看
html代码

<div class="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav navbar-right">
<li><a href="#portfolio" title="portfolio">Portfolio</a></li>
<li><a href="#services" title="services">Services</a></li>
<li><a href="#news" title="news">News</a></li>
<li><a href="#team" title="team">Team</a></li>
<li><a href="#contact" title="contact">Contact</a></li>
</ul>
</div>

<div id="portfolio">...</div>
<div id="services">...</div>
<div id="news">...</div>
<div id="team">...</div>
<div id="contact">...</div>

滚动到指定div位置
jquery代码

$(function () {
$('#mynav li a').click(function(){
var $_this = $(this)
var id = $_this.attr("title")
$('html,body').stop(true).animate({scrollTop:$("#"+id).offset().top}, "slow");
return false;
});
}

滚动到底部位置

$(function () {
$('#mynav li a[title=portfolio]').click(function(){
$('html,body').animate({scrollTop: $(document).height()}, "slow");
return false;
});
}

滚动到顶部位置

$(function () {
$('#mynav li a[title=portfolio]').click(function(){
$('html,body').animate({scrollTop: 0}, "slow");
return false;
});
}

return false;当一个链接被点击的代码将在函数内部运行
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ScrollTo