js 回到顶部

最新推荐文章于 2021-12-01 11:16:19 发布

lujianwen

最新推荐文章于 2021-12-01 11:16:19 发布

阅读量508

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/lujianwen/article/details/8239944

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

不说费话了，直接看代码，唯一的说明，需要自己添加jQuery库

<html>
	<head>
		<script language="javascript" src="jquery.min-1.4.2.js"></script>
	</head>
	<body>
		<pre>
			1
			2
			3
			4
			5
			6
			7
			8
			9
			0
			1
			2
			3
			4
			5
			6
			7
			8
			9
			0
			1
			2
			3
			4
			5
			6
			7
			8
			9
			0
			1
			2
			3
			4
			5
			6
			7
			8
			9
			0
			1
			2
			3
			4
			5
			6
			7
			8
			9
			0
		</pre>
			<div style="bottom: 0;left: 50%;margin-left: 400px;position: fixed;width: 24px;" id="GoTop">
				<a href="javascript:;">返回顶部</a>
			</div>
		    <script type="text/javascript">
		        jQuery.fn.topLink = function(settings) {
		            settings = jQuery.extend({
		                min: 1,
		                fadeSpeed: 200,
		                ieOffset: 50
		            }, settings);
		            return this.each(function() {
		                var el = $(this);
		                el.css('display', 'none'); 
		                $(window).scroll(function() {
		                    if (!jQuery.support.hrefNormalized) {
		                        el.css({
		                            'position': 'absolute',
		                            'top': $(window).scrollTop() + $(window).height() - 100
		                        });
		                    }
		                    if ($(window).scrollTop() >= settings.min) {
		                        el.show();
		                    }
		                    else {
		                        el.hide();
		                    }
		                });
		            });
		        };

		        $(document).ready(function () {
		            $('#GoTop').topLink({
		                min: 10,
		                fadeSpeed: 500
		            });
		            $('#GoTop').click(function (e) {
		               $("html,body").animate({"scrollTop":"0"},"slow")
		            });
		        });
		</script>
	</body>
<html>