HTML Learning Note bis (back to top with back to bottom) __html

Back to the top of the bottom

Two ways to get back to the top
first, the use of JS

$ (' HTML, Body '). Animate ({scrolltop:0}, ' fast ');//Drive Draw
        $ (' html,body '). scrolltop (0);//Without animation

  $ (window). Scroll (function () {
            //you ' ve scrolled this is much:
               $ (' P '). Text ("Your ' ve scrolled" + $ (window). ScrollTop () + "Pixels");
        

use the Name property of a label

<a name= "Top" >top</a>
            <a href= "#top >click"

third, obtain the height

1. The entire document height

var BODY = document.body,
            html = document.documentelement;

        var height = Math.max (body.scrollheight, Body.offsetheight,
                       html.clientheight, Html.scrollheight, Html.offsetheight);

       or
        var height = $ (document). Height ();

2. Current screen height

var wheight = $ (window). Height ();

HTML code

<!--side bar button-->
        <div id= "Back-top" >
		  <button class= "Styled-button" >TOP</button>
		</div>
		<div id= "Back-end" >
		  <button class= "Styled-button" >TOP</button>
		</ Div>
		<!--bottom content-->
        <div id= "Footer" ></div>

JS Code

JQuery (document). Ready (function ($) {
    /**
     * back to top
     *
    /$ (' #back-top '). Click (function () {
        $ (' Html,body '). Stop ();
        $ (' html,body '). Animate ({
            scrolltop: ' 0px '
        },1000);
    });
    
    /**
     * Back to bottom * * *
    (' #back-end '). Click (function () {
        $ (' html,body '). Stop ();
        $ (' html,body '). Animate ({
            scrolltop:$ (' #footer '). Offset (). Top
        },1000);
    });

Return to the top display hidden code
		   $ (document). Ready (function () {

			  //Hide #back-top a
			  ("#back-top"). Hide ();

			  Fade in #back-top
			  $ (function () {
			    $ (window). Scroll (function () {
			      if ($ (this). ScrollTop () >) {
			        $ (' #back-top '). FadeIn ();
			      else {
			        $ (' #back-top '). fadeout ();
			      }
			    );

			    Scroll to 0px on click
			    $ (' #back-top '). Click (function () {
			      $ (' body,html '). Animate ({
			        scrolltop:0< c16/>}, ' fast ');
			      return false;});};

			

CSS Code

#back-top{position:fixed; bottom:20px; right:2%; z-index:100;}