scrollTop 滚动动画
2017-02-15 00:00
363 查看
html代码
滚动到指定div位置
jquery代码
滚动到底部位置
滚动到顶部位置
<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;当一个链接被点击的代码将在函数内部运行
相关文章推荐
- 利用scrollTop属性制作滚动动画
- 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)
- 详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
- ListView smoothScrollToPositionFromTop 偶现滚动位置不精确问题解决办法
- 微信小程序scroll-view组件实现滚动动画
- jQuery 实现 Scroll to Top 滚动到页面顶部
- 滚动与scrollTop/scrollLeft的研究
- HorizontalScrollView左右滚动的动画
- 滚动动画animate-scroll扩展
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- 页面滚动时的位置:为了兼容浏览器,封装自己的scrollTop和scrollLeft(内含“怪异模式”)
- js获取浏览器滚动条垂直滚动距离scrollTop的兼容方法
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
- scrollLeft,scrollTop,滚动代码的总结
- 通过改变scrollTop使元素滚动
- 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
- 各浏览器对于获取文档水平及垂直方向滚动条位置(scrollLeft、scrollTop)时的参考元素存在差异
- scrollLeft,scrollTop,滚动代码的总结
- scrollReveal.js – 页面滚动显示动画JS
- 聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView