页面中加入回到顶部按钮的实现方法

最新推荐文章于 2024-02-01 16:58:38 发布

wmtopfire

最新推荐文章于 2024-02-01 16:58:38 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/baidu_34449164/article/details/52005424

版权

有时候我们在浏览网页时，看完了所有的信息，此时若需要返回顶部，不应该滑动滚动条而应使用一个快捷的方法立刻返回。简单列出几种方法：

一、使用锚标记返回页面顶部

使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。
页面顶部放置：
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。
页面底部放置：
<a href="#top" target="_self">返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1：
<a href="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置x，第二个参数是垂直位置y，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2：
本方式是渐进式返回顶部，要好看一些，代码如下：

function pageScroll() { 
window.scrollBy(0,-10); 
scrolldelay = setTimeout('pageScroll()',100); 
} 
<a href="pageScroll();">返回顶部</a>

三、综合使用Javascript函数和window.scroll功能实现动态返回顶部

可自行定义其滑动速度

html元素：

<h1>标题</h1>
	<div class="settop">          	
      <input type="button" value="返回顶部" id="top" οnclick="goback()">
    </div>

css样式：

body,input{margin:0;padding:0;}
       .settop {width: 100px;
       	        height: 30px;  
                position: fixed;
                bottom:50px;
                right:50px;
		        z-index: 2;
		        display: none;
		       }
		.settop input{width:100px;
			          height:30px;
			          outline: none;
			          font-size: 17px;
			          border-radius:10px;} 
		  body {
		  	   overflow-y: scroll;
		  	   height: 3000px;
		  	   width: 90%;
		  	   border: 1px solid red;
		  }
	}

JavaScript代码：

向下滚动到一定高度显示返回按钮，否则会隐藏按钮

代码实现：

1原生JS：

window.onscroll = function(){ 
	//考虑到浏览器的兼容性
	//chrome 支持body，IE，firefox支持documentElement
	//safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset
  var t = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
   var top_div = document.getElementsByClassName( "settop")[0]; 
    var num=300;  //自定义设置显滑动多少距离显示
    if( t >= num ) { 
     top_div.style.display = "inline"; 
   } else { 
     top_div.style.display = "none"; 
   } 
  }

2.jQuery代码：

$(function(){
		$(window).scroll(function(){
			var num=300;
		if($(window).scrollTop() >= num)
			{$(".settop").show();}
        else  $(".settop").hide();
		});	    
	});

触发事件返回向上滑动goback（）函数回到顶部：

function goback(){
     	window.scrollBy(0,-200); //每次滑动的像素距离
     	scrollDelay = setTimeout('goback()',30); //调用时间
        var stop = document.documentElement.scrollTop+document.body.scrollTop;
        if(stop==0)
        	clearTimeout(scrollDelay);
     	scroll(0,0);
     }

wmtopfire

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
页面中加入回到顶部按钮的实现方法

有时候由于页面太长，但浏览到页面底部的时候要返回顶端，则需要加入一个返回到页面顶端的按钮：实现代码如下：简单的可以在返回顶部，然后再对其进行样式的修饰。html元素： css样式：.settop{width: 100px;height: 30px; position: fixed;bottom:50px;right:50px
复制链接

扫一扫