I extended this a bit to include some back to top feature.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JavaScripAutoScroll.aspx.vb" Inherits="JavaScripAutoScroll" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>JavaScript Auto Populate the page | MMWebs.biz</title>
<style type="text/css"> div#status{ position: fixed;font-size: 24px;} div#wrap{ width: 800px; margin: 0 auto} div.newData{ height: 1000px;background: #09F;margin: 10px 10px;} .back-to-top { position: fixed; bottom: 2em; right: 0px; z-index: 999; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; } .back-to-top:hover { background-color: rgba(135, 135, 135, 0.50); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function yHandler() { var wrap = document.getElementById('wrap'); var contentHeidht = wrap.offsetHeight; // Gets page content height var yOffset = window.pageYOffset; //Gets the vertical scroll position var y = yOffset + window.innerHeight; if (y >= contentHeidht) { wrap.innerHTML += '<div class="newData"></div>'; // Ajax call to get more dynamic data goes here } var status = document.getElementById('status'); status.innerHTML = contentHeidht + " | " + y; } window.onscroll = yHandler; </script> </head> <body> <a href="#" class="back-to-top">Back to Top</a> <form id="form1" runat="server"> <div> <div id="status">0 | 0</div> <div id="wrap"><img src="framework/images/tempMatrix.gif" width="800px" height="1200px" /></div> </div> </form> </body> </html> <script type="text/javascript"> var offset = 220; var duration = 500; jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function (event) { event.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, duration); return false; }); </script>
No comments:
Post a Comment