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网站添加返回顶部按钮