HTML Learning Note II (back to top and back to the part)

Back to the top back to the exact part

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

<!--Sidebar 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 the exact ministry */    $ (' #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 and back to the part)