HTML学习笔记之二（回到顶部与回到底部）

左手的ㄟ右手 2022-08-05 02:51 498阅读 0赞

回到顶部 回到底部

回到顶部的俩种方式

##  一、使用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; }