Top Questions

  • 5.7 Years

    • Category : Jquery
    • Location : Unknown
    • Posted On : Mar 29, 2018

    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

    View More

    admin

    admin

    5.3 Years

    Answered:

    Mar 28, 2018

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

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