简单为Bootstrap网站添加返回顶部按钮

Bootstrap是由Twitter开发的自适应网站框架，它包含了丰富的样式、功能、字体图标库，依托HTML5及CSS3，使得网站在拥有令人惊艳外表的同时，还支持在不同设备上进行展现，现在越来越多的网站建设者们纷纷选择Bootstrap，然而Bootstrap并没有特意提及在其所建设的网站中添加返回顶部按钮的方法，这无疑是一缺憾，通过添加返回顶部按钮，方便了客户浏览，大大提升了网站交互性能及客户体验度，下面我们就简单的为Bootstrap网站添加返回顶部按钮，使网站更完美.

首先我们需要引入Bootstrap必要组件，它们分别为：bootstrap.css、bootstrap.js、jquery.js，将这些组件引入到网页之中，这里我们使用七牛云提供的公共资源库资源.

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 

在网页</body>前添加以下html代码

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>

而后需要单独为其设置内嵌样式

<style type="text/css">
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}
</style>

最后添加JS代码从而实现点击返回顶部的交互功能

 <script>
	$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');

});	
	</script>

至此我们就成功为Bootstrap网站添加了返回顶部按钮，是不是非常简单呢？这主要是因为依托了功能非常全面的Bootstrap框架，如果你的网站还没有添加返回顶部按钮，那么不妨试试自己添加，从而提高网站交互能力及客户体验度吧.

未经允许不得转载：西德SEO » 简单为Bootstrap网站添加返回顶部按钮