<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