Question

我找到了解决方案。当用户登陆页面时，当主页面滚动结束时正常向下滚动我有一个带滚动条的固定高度页脚。我想将固定高度的页脚滚动到末尾，而不是将鼠标放在该部分上。使用Bootstrap但这个功能完全不同。

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

这是清除理解的图像。

    <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）查看this问题的已接受答案 2）在用户到达主要内容的底部后，以编程方式将焦点设置为页脚 - .focus() More Info on focus
3） jQuery有一个名为scrollTop()的方法，一旦焦点切换回主要内容，您可以在页脚上使用它。 More Info on scrollTop

固定高度页脚滚动效果

1 个答案: