Question

我正在创建一个1页的网站，所以我的菜单中有链接片段，可以将您移动到页面的正确部分。

我的问题是底部有固定的定位意味着链接片段起作用。我已经向身体添加了底部填充，因此当您向下滚动时，最后一部分显示为页面内容的其余部分。有什么解决方案吗？

我可以在点击链接时使用JavaScript向下滚动页面，但我不确定屏幕阅读器或其他可用性设计对此有何影响。

<div id="menu">
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#four">Four</a>
  <a href="#five">Five</a>
  <a href="#last">Last</a>
</div>
<div id="one">
  One
</div>  
<div id="two">
  Two
</div>  
<div id="three">
  Three
</div>  
<div id="four">
  Four
</div>  
<div id="five">
  Five
</div>  
<div id="last">
  Last
</div>

#one, #two, #three, #four, #five {
  border: 3px solid red;
  background: grey;
  width: 100%;
  height: 300px;
  z-index: 2;
  position: relative;
}
#last {
  position: fixed;
  bottom: 0;
  border: 3px solid green;
  background: yellow;
  z-index:1;
  width: 100%;
  height: 300px;
}
body {
  padding-bottom: 300px;
}
#menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  background: white;
}

Answer 1

问题不在于#last未被链接，而是z-index更低。当您链接到它时，div仍隐藏在其他div后面。您只需在点击z-index链接时更改#last即可。您也可以使用scrollTop移动到屏幕底部，并通过将其他人移开来显示#Last div。

要明确position

relative正常流动元素，但允许使用top，left，right上设置的值相对于其正常位置设置位置， bottom属性。

absolute将元素相对于其最近定位的父元素的边缘放置。如果已设置该元素的定位，则此元素将是文档的主体或嵌套它的元素。

使用您的示例我已更新它，以便点击#last将显示div。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready( function() {
        $("#last-link").click(function() {
            //$("#last").css("z-index", "3")
            $("html, body").animate({ scrollTop: $(document).height()-$(window).height() }, "fast");
        });
        $("a:not(#last-link)").click(function() {
            $("#last").css("z-index", "1")
        });
    })
    </script>
    <style type="text/css" media="all">
        #one, #two, #three, #four, #five {
          border: 3px solid red;
          background: grey;
          width: 100%;
          height: 300px;
          z-index: 2;
          position: relative;
        }
        #last {
          position: fixed;
          bottom: 0;
          border: 3px solid green;
          background: yellow;
          z-index:1;
          width: 100%;
          height: 300px;
        }
        body {
          padding-bottom: 300px;
        }
        #menu {
          position: fixed;
          top: 0;
          right: 0;
          z-index: 3;
          background: white;
        }
    </style>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
    <div id="menu">
        <a href="#one">One</a> 
        <a href="#two">Two</a> 
        <a href="#three">Three</a>
        <a href="#four">Four</a> 
        <a href="#five">Five</a> 
        <a href="#last" id="last-link">Last</a>
    </div>
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
    <div id="five">Five</div>
    <div id="last">Last</div>
</body>
</html>

Answer 2

我想我找到了解决方案。使链接片段目标静态定位，并使其中的div固定定位似乎工作。

Answer 3

你无法使用固定位置工作，因为当点击链接时，html将检索当前位置#last并将页面滚动到该位置。由于您的#last div位于可见区域，因此html不会一直向下滚动。你必须使用j来使它工作。

链接片段不在固定定位目标上工作

3 个答案: