HTML study note 2 (Back to Top and back to bottom), study note back to top

HTML study note 2 (Back to Top and back to bottom), study note back to top

Back to Top back to bottom

Two methods to return to the top

I. Use js

$ ('Html, body '). animate ({scrollTop: 0}, 'save'); // $ ('html, body') with animation '). scrollTop (0); // No animation

  $(window).scroll(function () {            //You've scrolled this much:               $('p').text("You've scrolled " + $(window).scrollTop() + " pixels");        });

Ii. Use the name attribute of tag

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

3. Get height

1. Entire document height

Var body = document. body, html = document.doc umentElement; 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 ($) {/*** return to the top */$ ('# back-top '). click (function () {$ ('html, body '). stop (); $ ('html, body '). animate ({scrollTop: '0px '}, 1000) ;});/*** return to the bottom */$ (' # back-end '). click (function () {$ ('html, body '). stop (); $ ('html, body '). animate ({scrollTop: $ ('# footer '). offset (). top}, 1000 );});});

// Display the hidden code at the top of the page $ (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}, 'save'); return false ;});});});

Css code

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