scrollTop 滚动动画

为什么80%的码农都做不了架构师？>>>   

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;当一个链接被点击的代码将在函数内部运行

转载于:https://my.oschina.net/lpcysz/blog/839041