HTML学习笔记之二(回到顶部 与 回究竟部)

HTML学习笔记之二(回到顶部 与 回究竟部)

大家好,又见面了,我是全栈君。

回到顶部 回究竟部

回到顶部的俩种方式

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115661.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号