Load more content with jQuery

  • 5 years-7 months

    Load more content with jQuery

    • Category : jquery
    • Viewed : 49 times
    • Posted On :
    • Posted by : Sunil1521543962

    Load more content with jQuery

    <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>


     

    1 Answers


    profile image

    Name: sunil1521543962

    Experiance: 5 years-7 months

    answered

    <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>
    
    <style>
    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;
    }
    </style>
    <script>
    /*
    	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();
        }
    });
    </script>
     

Report this or Ask your own question

Your Answer

When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Let's work to help developers, not make them feel stupid.