Fixed height footer scrolling effect

Question

I'm finding a solution. When the user lands on the page scroll down normally when the main page scroll ends I have a fixed height footer with scroll bar. I want to scroll the fixed height footer to the end without the taking the mouse on the section. Using Bootstrap but this feature is completely different.

1. Hide the scrolling bar of the fixed height footer
2. Scroll the content to the bottom with mouse scroll no matter if the user mouse is on the section or not.
3. Reset the footer position to the top when the user scroll the main page.

Here is the image to clear the understanding.

Image link

    <div id="sidebar">
    <div id="scroller">

        <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <p class="Callus">Call Us <span>+56465454</span>
                    </p>
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <p class="share">Share
                        <a href="#" class="linkedin"></a>
                        <a href="https://twitter.com" class="twitter" target="_blank"></a>
                    </p>
                </div>
                <!-- col-md-3 -->
                <div class="col-md-6 col-sm-12 col-xs-12 no-gutter">
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <p class="course">Get Our Free Course</p>
                    </div>
                    <!-- col-md-3 -->
                    <div class="col-md-9 col-sm-12 col-xs-12 no-gutter">
                        <div class="col-md-9 col-sm-8 col-xs-12 no-gutter">
                            <div class="form-group">
                                <input type="email" class="form-control newsletter" placeholder="Email address">
                            </div>
                            <!-- form-group -->
                        </div>
                        <!-- col-md-9 -->
                        <div class="col-md-3 col-sm-4 col-xs-12">
                            <button type="submit" class="btn btn-default outlineSubmit">Sign Up</button>
                        </div>
                        <!-- col-md-3 -->
                    </div>
                    <!-- col-md-9 -->
                </div>
                <!-- col-md-6 -->
            </div>
            <!-- row -->
        </div>
        <!-- container -->

        <hr />

        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12 FooterForm">
                    <div class="col-md-8 col-sm-8 col-xs-12 no-gutter">
                        <h4>Say Hello</h4>
                        <div class="footerForm form-style" id="contact_form">
                            <div id="contact_results"></div>
                            <div id="contact_body">
                                <div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
                                    <input type="text" name="name" id="name" required="true" class="input-field form-control footerFields" placeholder="Name"/>
                                    <input type="text" name="surname" id="surname" required="true" class="input-field form-control footerFields" placeholder="Surname"/>
                                    <input type="email" name="email" required="true" class="input-field form-control footerFields" placeholder="Email"/>
                                </div><!-- col-md-6 -->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
                                    <textarea name="message" id="message" class="textarea-field form-control" required="true" rows="3"></textarea>
                                    <input type="submit" id="submit_btn" value="Submit" class="btn outlineSubmit2" />
                                </div><!-- col-md-6 -->
                            </div><!-- contact_body -->
                        </div><!-- contact_form -->
                    </div><!-- col-md-8 -->
                    <div class="col-md-3 col-sm-3 col-xs-12 customRight">
                        <h4>Sitename</h4>
                        <p class="address">Address</p>
                        <h4>Twitter</h4>
                        <p class="address"><a href="@"><i class="fa fa-twitter"></i> @twitter</a>
                        </p>
                    </div>
                    <!-- col-md-3 -->
                </div>
                <!-- col-md-12 -->

                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                        <p class="copyright">COPYRIGHT 2015 ARTIOS. All rights reserved.</p>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                        <div id="top-link-block" class="goTop pull-right">
                            <a href="#top" class="linkup" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
                                <i class="fa fa-angle-up"></i>
                            </a>
                        </div><!-- top-link-block -->
                    </div>
                </div><!-- col-md-12 -->
            </div><!-- row -->
        </div><!-- container -->
    </div><!-- footer -->
</div>
</div>

CSS

#sidebar{
    float: left;
    width: 100%;
    height: 300px;
    border: 0px solid #000;
    overflow: hidden;
}
#scroller{
    float: left;
    width: 101%;
    height: 300px;
    overflow: scroll; 
}

Answer 1

1) Take a look at the accepted answer to this question.
2) Look into programatically setting the focus to your footer after the user reaches the bottom of the main content - .focus() More Info on focus
3) jQuery has a method called scrollTop() which you could look into using on the footer once the focus switches back to the main content. More Info on scrollTop