Javascript固定页脚涵盖重点

Question

我有一个正在处理的网页，该网页的底部有一个固定的页脚。

https://littlemouseproductions.blob.core.windows.net/example/Footer%20Example.PNG

当用户在各个字段之间切换并将焦点设置在固定页脚下方的元素上时，页面不会向上滚动以显示聚焦的元素。是否可以使用javascript自动滚动以确保焦点元素始终显示在页脚上方？

Answer 1

我认为您正在寻找Element.scrollIntoView（）函数。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

    function setFocusToElement () {
      var element = document.getElementById("yourelement");
      element.focus();
      element.scrollIntoView();
    }

Answer 2

如果您所有的输入字段均为<input>，则可以使用JavaScript做到这一点：

[].forEach.call(document.getElementsByTagName("input"), function(element) {
    element.addEventListener("focus", function(event) {
        window.location.href = location.pathname + "#" + event.target.id;
    })
})

这应该做三件事：

1. 遍历每个<input>元素
2. 向每个onfocus元素添加一个<input>事件监听器
3. 将窗口位置设置为文件名，再加上刚刚关注的元素的标签选择器。

希望这对您有所帮助！

这是做相同事情的jQuery方法：

$("input").on("focus", function() {
    window.location.href = location.pathname + "#" + $(this).id;
})

稍微简单一点，但是它做同样的事情。