Home > Web Front-end > HTML Tutorial > Create a floating button that returns to the top of an html page

Create a floating button that returns to the top of an html page

王林
Release: 2020-12-25 11:15:51
forward
8185 people have browsed it

Create a floating button that returns to the top of an html page

The specific code is as follows:

(Learning video sharing: html video tutorial)

CSS style code:

.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
		}
Copy after login

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>
Copy after login

Javascript code:

$(function () {
	        var bt = $(&#39;#toolBackTop&#39;);
	        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();
                }
	        });
	});
Copy after login

Premise: First introduce jQuery

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

Effect display:

Create a floating button that returns to the top of an html page

Button image:

Create a floating button that returns to the top of an html page

Related recommendations: html tutorial

The above is the detailed content of Create a floating button that returns to the top of an html page. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template