大家好，又见面了，我是全栈君。
回到顶部 回究竟部
回到顶部的俩种方式
一、使用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; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/115661.html原文链接：https://javaforall.net
