大家好,又见面了,我是全栈君。
回到顶部 回究竟部
回到顶部的俩种方式
一、使用js
$('html, body').animate({ scrollTop: 0 }, 'fast');//带动画 $('html,body').scrollTop(0); //不带动画
$(window).scroll(function () { //You've scrolled this much: $('p').text("You've scrolled " + $(window).scrollTop() + " pixels"); });
二、使用 a 标签的name属性
<a name="top">top</a> <a href="#top">Click here go back to the top.</a>
三、获取高度
1. 整个文档高度
var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); // 或者 var height = $(document).height();
2. 当前屏幕高度
var wheight = $(window).height();
HTML代码
<!-- 側边栏 按钮--> <div id="back-top"> <button class="styled-button">TOP</button> </div> <div id="back-end"> <button class="styled-button">TOP</button> </div> <!--底部 内容--> <div id="footer"></div>
js代码
jQuery(document).ready(function($){ /** * 回到顶部 */ $('#back-top').click(function(){ $('html,body').stop(); $('html,body').animate({ scrollTop:'0px' },1000); }); /** * 回究竟部 */ $('#back-end').click(function(){ $('html,body').stop(); $('html,body').animate({ scrollTop:$('#footer').offset().top },1000); }); });
//回到顶部的 显示 隐藏代码 $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 'fast'); return false; }); }); });
css代码
#back-top{position: fixed; bottom:20px; right: 2%; z-index: 100; }
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115661.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...