javascript - How to add "Back to top" link at bottom at <div> is browser window is shorter than page, using jquery? -

How to add the "back to top" link below the browser window, is smaller than the page, using jquery?

  & lt; Div id = "mainContent" & gt; & Lt; P & gt; Some content & lt; / P & gt; & Lt; / Div & gt;  

If some content is larger than a browser window (I mean the vertical bar comes to the page), then I want to add it back to the top before turning off the div.

  & lt; Div id = "main content" & gt; & Lt; P & gt; Some content & lt; / P & gt; & Lt; P & gt; Some content & lt; / P & gt; & Lt; P & gt; Some content & lt; / P & gt; & Lt; A href = "#" & gt; Back to top & lt; / A & gt; & Lt; / Div & gt;  

If the browser's vertical scroll bar and user goes down on the page then I want to show the "Back to Top" link.

When the page is loading, type some code to run:

 $ (Function () {if ($ (window) height () & lt; $ ("# main content") height ()) {$ ("# main content"). Attachment ('& lt; A href = "# main content" & gt; back to top & lt; / a & gt; ';)}});  

It is as simple as possible; We use the jQuery method to see if we need a return link or not, and if we do it with us, then add one. The return link uses that id attribute using the same div , in which the user has to withdraw at the top of the page. (If this main content page is not at the top of the page, you will need to create a separate division with your ID; this device may be empty for as long as it has an ID attribute.)

< / Div>