资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

bootstrap设置页面回到顶端悬停提示的方法-创新互联

这篇文章将为大家详细讲解有关bootstrap设置页面回到顶端悬停提示的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司主营东胜网站建设的网络公司,主营网站建设方案,成都App制作,东胜h5小程序设计搭建,东胜网站营销推广欢迎东胜等地区企业咨询

bootstrap设置页面回到顶端悬停提示方法如下:

1、首先在body中添加“返回顶部”按钮


2、css 的定义

div .go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}
div .go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}
div .go-top div .arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}
div .go-top div .stick {
position: absolute;
left: 15px;
top: 15px;
width: 8px;
height: 14px;
display: block;
background-color: #cc3333;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。

3、按钮默认不可见,当滚动页面到一定高度后,按钮出现

$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 1000)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
});

关于bootstrap设置页面回到顶端悬停提示的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站栏目:bootstrap设置页面回到顶端悬停提示的方法-创新互联
网页地址:http://cdkjz.cn/article/cdoppi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220