回到顶部 回到底部
回到顶部的俩种方式
一、使用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属性           
top click here go back to the top.
三、获取高度
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代码
top
top

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; }