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

【前端】HTML底部返回顶部悬浮按钮CSS样式:.back-to{ bottom:55px; overflow:hidden; position:fixed; right:10px; width:110px; z-index:999; } .back-to.back-top{ background:url(“./imag…

大家好,又见面了,我是你们的朋友全栈君。

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>

样式展示:
在这里插入图片描述
按钮图片:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158652.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • toast弹窗教程_toast提示是什么

    toast弹窗教程_toast提示是什么2.3.1 反编译APK安装包首先,需要从网上下载样本安装包,这里使用的样本是哒哒文件助手,读者可以从安卓市场下载。在反编译APK之前,还需要从网上下载第三方模拟器,如夜神、雷电等模拟器。安装下载好的样本,运行看一下效果,大概了解一下该APK实现的相关功能,如图2.6所示,该界面就是程序入口界面。                   图2.6…

  • 设计模式(五)适配器模式Adapter(结构型)

    设计模式(五)适配器模式Adapter(结构型)设计模式(五)适配器模式Adapter(结构型)1.概述:接口的改变,是一个需要程序员们必须(虽然很不情愿)接受和处理的普遍问题。程序提供者们修改他们的代码;系统库被修正;各种程序语言以及相关库的发展和进化。例子1:iphone4,你即可以使用UBS接口连接电脑来充电,假如只有iphone没有电脑,怎么办呢?苹果提供了iphone电源适配器。………

  • ipynb后缀文件怎么打开「建议收藏」

    ipynb后缀文件怎么打开「建议收藏」ipynb,顾名思义,ipythonnotebook,哦,原来是用ipythonnotebook打开的啊,下面讲讲怎么安装ipythonnotebook(我的环境是win1064位python是2.7版本,如果要问为何是这个版本,我之后给你丢一个神秘的微笑)第一部分:安装ipython1:安装python,这个不说2:安装pip,这个也不说,网上有很多例子,一般装了py…

  • linux目录结构详解_简述linux系统中的目录结构

    linux目录结构详解_简述linux系统中的目录结构前言平常linux系统用的也不少,那么linux下的每个目录都是用来干什么的,小伙伴们有仔细研究过吗?让我们来了解下吧Linux系统目录结构登录系统后,在当前命令窗口下输入命令:[root@

  • 【一个整蛊人的小程序】c++,鼠标控制

    【一个整蛊人的小程序】c++,鼠标控制

  • 死磕Lambda表达式(六):Consumer、Predicate、Function复合

    死磕Lambda表达式(六):Consumer、Predicate、Function复合JDK不仅提供的这些函数式接口,其中一些接口还为我们提供了实用的默认方法,这次我们来介绍一下Consumer、Predicate、Function复合。

    2022年10月28日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号