<div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> <a href="#" id="loadMore">Load More</a> <p class="totop"> <a href="#top">Back to top</a> </p>
body { background-color: #f6f6f6; width: 400px; margin: 20px auto; font: normal 13px/100% sans-serif; color: #444; } div { display:none; padding: 10px; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; margin-bottom: 5px; background-color: #f1f1f1; } .totop { position: fixed; bottom: 10px; right: 20px; } .totop a { display: none; } a, a:visited { color: #33739E; text-decoration: none; display: block; margin: 10px 0; } a:hover { text-decoration: none; } #loadMore { padding: 10px; text-align: center; background-color: #33739E; color: #fff; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; } #loadMore:hover { background-color: #fff; color: #33739E; }
/* Load more content with jQuery - May 21, 2013 (c) 2013 @ElmahdiMahmoud */ $(function () { $("div").slice(0, 4).show(); $("#loadMore").on('click', function (e) { e.preventDefault(); $("div:hidden").slice(0, 4).slideDown(); if ($("div:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); }); $('a[href=#top]').click(function () { $('body,html').animate({ scrollTop: 0 }, 600); return false; }); $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('.totop a').fadeIn(); } else { $('.totop a').fadeOut(); } });
Jagdish Sarma Asked question February 3, 2021