重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关bootstrap设置页面回到顶端悬停提示的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联专注于南明企业网站建设,成都响应式网站建设公司,成都做商城网站。南明网站建设公司,为南明等地区提供建站服务。全流程定制网站制作,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
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设置页面回到顶端悬停提示的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。