【前端】HTML底部返回顶部悬浮按钮

CSS样式：

.back-to {bottom: 55px;overflow: hidden;position: fixed;right: 10px;width: 110px;z-index: 999;}.back-to .back-top {background: url("./images/top.png") no-repeat scroll 0 0 transparent;display: block;float: right;height: 50px;margin-left: 10px;outline: 0 none;text-indent: -9999em;width: 50px;}.back-to .back-top:hover {background-position: -50px 0}

DIV:

<div style="display:none;" class="back-to" id="toolBackTop"><a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"></a></div>

JavaScript:

$(function () {var bt = $('#toolBackTop');var sw = $(document.body)[0].clientWidth;var limitsw = (sw - 840) / 2 - 80;  //距离右侧距离if (limitsw > 0){limitsw = parseInt(limitsw);bt.css("right",limitsw/8);}$(window).scroll(function() {var st = $(window).scrollTop();if(st > 30){bt.show();}else{bt.hide();}});});

前提：首先引入jQuery

<script type="text/javascript" src="/static/js/jquery.min.js"></script>

样式展示：

按钮图片：

【前端】HTML底部返回顶部悬浮按钮相关推荐

移动端的返回顶部悬浮按钮还需要存在吗？
一. 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部.产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此.那么 ...
使用 React Hooks实现一个返回顶部的按钮
[回到顶部]是许多网页非常常用的按钮,通常放在长页面的右下角,点击可以直接让页面回到顶端. 要实现这个组件,需要以下几个要点: 设置定位按钮定位设置为position: fixed,并且设置位置到屏 ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
axure下移固定地方_axure固定元件位置教程：使用axure动态面板制作一个返回顶部的按钮...
许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
js编写简易返回顶部按钮
之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...
手机端html返回顶部,移动端H5页面返回顶部按钮无效问题的解决
一直都是在PC端写返回顶部的按钮,今天的项目是移动端,页面内容比较多,也有滚动顶部的功能,于是一开始用了原生的的写法,没有用,经过调试,滚动时获取不到滚动的高度.接着又换了一个gototop.js插件 ...
html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...
js原生实现过渡效果的返回顶部功能实例
问题描述适用范围:所有前端界面,返回顶部按钮兼容:ie 9 以上以下是实现功能的代码: <div style="position: fixed; width: 40px; hei ...

【前端】HTML底部返回顶部悬浮按钮

【前端】HTML底部返回顶部悬浮按钮相关推荐

最新文章

热门文章