javascript - 获取简码按钮以粘贴到窗口/页面部分的底部中心

Question

这是我的第一个问题，希望我做对了!

基本上，我正在构建一个使用 wordpress 作为 CMS 的网站(使用 artbees Jupiter 主题:http://artbees.net/themes/jupiter/)，我需要获得一个短代码按钮以固定在页面部分的底部并进行移动响应。也就是说，对于页面的特定部分，我需要将按钮固定在屏幕底部。

我在这里使用主题中已有的“滚动到底部”箭头功能做了一个例子，除了这个滚动而不是链接到另一个页面:http://explosiveleads.net/about/

如您所见，无论如何，箭头都会粘在“页面部分”的底部(尽管我希望按钮位于文本下方，而不是在屏幕之外。

所以我已经尝试了大约十亿种选择。我最接近的是为名为“bottombutton”的按钮创建一个自定义类并将其放入自定义 css 中:

.bottombutton {
position:fixed;
bottom:10px;
}

但是，这会使按钮从中心向右偏移，然后在移动设备上查看时会被取消。

如果我这样做:

.bottombutton {
position:fixed
bottom:5%
right:50%
}

它只是让我感到兴奋，并且仍然偏离中心。

在绝望的努力中，我给主题的创作者发了电子邮件并寻求帮助。他们告诉我:“不幸的是，只用 CSS 做这样的事情是不可能的。我们也用 Javascript 做了你提到的箭头”

但是，我不确定如何使用 javascript 来完成。

任何帮助将不胜感激!如果需要任何其他信息，请告诉我!

Answer 1

在回答之前，我的英语不好，你很难听懂我的英语。

但我会努力的。

.

我将向您介绍在 javascript 中将按钮固定在底部的多种方法之一。

首先，你需要在页面滚动时捕获事件

window.onscroll = function(){}

其次，制作底部固定按钮的功能。

var fixedButton = document.getElementsByClassName("bottombutton")[0];
    fixedButton.style.position = "absolute";
    fixedButton.style.top = window.pageYOffset + window.innerHeight - parseInt(fixedButton.style.height);

第三，合并。

window.onscroll = function(){
    var fixedButton = document.getElementsByClassName("bottombutton")[0];
    fixedButton.style.position = "absolute";
    fixedButton.style.top = window.pageYOffset + window.innerHeight - parseInt(fixedButton.style.height);
}

最后你可以看到底部的粘性按钮。但我向您推荐 jQuery javascript 插件。 http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

谢谢。

---

抱歉，我修复了一些代码

这会很好用。

window.onscroll = function(){
    var fixedButton = document.getElementsByClassName("bottombutton")[0];
    fixedButton.style.position = "absolute";
    fixedButton.style.top = document.body.scrollTop + window.innerHeight - fixedButton.offsetHeight + "px";
}

---

jQuery 主页源代码

$(window).scroll(function(){
    $('.bottombutton').centerBottom();
});
$.fn.centerBottom = function () {
    $(this).css("position", "absolute");
    $(this).css("top", Math.max(0, $(window).height() - $(this).outerHeight() + $(window).scrollTop()) + "px");
    $(this).css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2)) + "px");
    return $(this);
};

它将在您的移动设备上运行