HTML Learning Note II (back to top with back to bottom)

Back to the top back to the bottom

Back to the top of the two ways

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 much:               $ (' P '). Text ("You ' ve scrolled" + $ (window). ScrollTop () + "Pixels");        });

Second, use the Name property of the A tag

<a name= "Top" >top</a>            <a href= "#top" >click here go back to the top.</a>

Iii. Obtaining height

1. 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);});    

Back to the top of the show hidden code   $ (document). Ready (function () {  //Hide #back-top first  $ ("#back-top"). Hide ();  Fade in #back-top  $ (function () {    $ (Windows). Scroll (function () {      if ($ (this). ScrollTop () >) {        $ (' #back-top '). FadeIn ();      } else {        $ (' #back-top '). FadeOut ();      }    });    Scroll body 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;}

HTML Learning Note II (back to top with back to bottom)