欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML学习笔记之二(回到顶部 与 回到底部)_html/css_WEB-ITnose

程序员文章站 2024-01-12 18:07:58
...
回到顶部 回到底部

回到顶部的俩种方式

一、使用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代码

        


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