画布推脚

Question

我在试着建一个画布上的推脚。

这样做的想法是，当从页脚菜单中选择不同的选项时，页面的其余部分会被推上以显示页脚内容。

有一个关于滑动页脚菜单这里的教程，但是由于它在页面的顶部(如顶层)滑动页脚内容，这不是我想要的。

通过使用引导“手风琴”，我设法将内容降到页面下面，但由于这超出了视图范围(浏览器窗口)，恐怕有些访问者找不到它。

这是一个小提琴

<div class="pushDown">Please scroll down to bottom</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
</div>
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 1
  </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 2
  </div>
</div>
</div>
</div>

有什么办法让面板向上推其馀的内容，而不是下降？

选项2-在这里，我调整了克里斯托弗·叶( Christopher Yee)插件，使其符合我的需要，但我只能用一个按钮使它工作。

PushFooter

$(function() {
var pushy = $('.pushy'), //menu css class
    body = $('body'),
    container = $('#container'), //container css class
    push = $('.push'), //css class to add pushy capability
    siteOverlay = $('.site-overlay'), //site overlay
    pushyClass = "pushy-left pushy-open", //menu position & menu open class
    pushyActiveClass = "pushy-active", //css class to toggle site overlay
    containerClass = "container-push", //container open class
    pushClass = "push-push", //css class to add pushy capability
    menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
    menuSpeed = 300, //jQuery fallback menu speed
    menuWidth = pushy.width() + "px"; //jQuery fallback menu width

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

如果我使用类名.pushy-left2、.menu-btn2、.pushy2等，我将如何编辑JS。

Answer 1

尝试将#id粘贴到页脚的内容区域，并在手风琴的触发器中创建一个链接。

当您单击该链接时，使其链接到内容区域'a href=‘mysite.com/home#home’‘。

所以它把页面的中心放在那条信息上