Javascript 固定高度页脚滚动效果

我正在寻找解决办法。当用户登陆页面时，通常向下滚动，当主页滚动结束时，我有一个带有滚动条的固定高度的页脚。我想将固定高度的页脚滚动到末尾，而不必在该部分上使用鼠标。使用引导，但此功能完全不同

隐藏固定高度页脚的滚动条 使用鼠标滚动将内容滚动到底部，无论用户鼠标是否在该部分。 当用户滚动主页时，将页脚位置重置为顶部。 以下是清晰理解的图像

我看一看问题的公认答案。 2.在用户到达主要内容的底部后，通过编程将焦点设置到页脚

---

3jQuery有一个名为scrollTop的方法，一旦焦点切换回主内容，就可以在页脚上使用它

到目前为止你试过什么？向我们提供您的示例代码，以帮助您…我已经尝试了这些方法，但仍然没有得到解决方案

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

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