回到顶部 回究竟部
回到顶部的俩种方式
一、使用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; }