js实现网页页面回到顶部

<script language="javascript">
$(function(){var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt).click(function() {$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {var st = $(document).scrollTop(), winh = $(window).height();(st > 0)? $backToTopEle.show(): $backToTopEle.hide();//IE6下的定位if (!window.XMLHttpRequest) {$backToTopEle.css("top", st + winh - 166);}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
});
</script>

css样式，完成在页面右下边栏竖向显示“返回顶部”4个字

<style>
/*返回顶部*/
.backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);}
</style>

转载于:https://www.cnblogs.com/kennyhr/p/3472481.html

js实现网页页面回到顶部相关推荐

js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
js实现点击回到顶部
效果实现 1.滚动条离顶部一定距离后,楼梯出现,否则隐藏 (这里要判断滚动条到顶部的高度) 2.点击楼梯按钮,自动出现相对应得页面. 3.拖拽滚动条,页面上的商品刚好和楼梯按钮对应上 ...
Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
uniapp页面回到顶部方法
本文讲的是在uniapp项目中实现页面回顶效果的方法.以下是代码(回顶可能多个页面都需要用到建议封装成一个组件) 一.方法一 <template><view class=" ...
*微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
微信的WeixinJSBridge还是没牛逼的,虽然官方文档只公布了3个功能,但是还内置的很多功能没公布,但是存在比如自动关闭当前浏览器内置函数:WeixinJSBridge.call('close ...
微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
微信的WeixinJSBridge还是很牛的,比如自动关闭当前浏览器内置函数:WeixinJSBridge.call('closeWindow'); 直接调用即可.
网页缓慢置顶回到顶部 html、css、js
题目: 网页缓慢置顶回到顶部( html.css.js)...鼠标点击回到顶部的盒子后,网页可先快后缓慢最终回到最初顶部.使用js的定时器实现. 问题描述: 鼠标点击回到顶部的盒子后,网页可先快后缓慢 ...
html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...

js实现网页页面回到顶部

js实现网页页面回到顶部相关推荐

最新文章

热门文章