堆栈内存溢出
  繁体   English   中英

如何在首页加载时在视口底部放置一个链接？

[英]How can I place a link at the bottom of the viewport on first page load?

 原文  2014-04-14 22:00:51  7   1    javascript/ jquery/ html/ css

问题描述

我想实现一个类似于看到的效果在这里的Dropbox的着陆页上。 请注意，浏览器视口底部有一个链接（“了解更多”）。 首次加载时，它始终位于页面底部。 但是，它并没有固定在窗口的底部，因为您可以滚动通过它。

任何想法如何实现这一目标？ CSS或jquery解决方案很好。

1 个解决方案

解决方案1
 0  2014-04-14 22:06:31

这是div的链接，该div具有以下CSS（ div ）： 

position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;

重要部分有position:absolute和bottom:50px

如何自动使底部居中<div>在视口上？</div><div id="text_translate"><p> 我正在创建一种仅基于纯文本、没有图像或其他任何内容的网站/实验，它仅包含一个&lt;div&gt;包含几个&lt;span&gt;和&lt;a&gt;元素，这些元素在使用 JS 点击时打开，显示堆叠的文本在&lt;div&gt;的底部。</p><p> 当屏幕上覆盖的文本过多时，问题就出现了，并且用户不断点击——因此，显示更多文本——这些新行一直堆叠在底部，不会自动可见：用户必须开始滚动到继续阅读。</p><p> 有没有办法可以自动将&lt;div&gt;的底部放在屏幕<em>的</em>中心，所以它不需要滚动？ 当文本填满整个屏幕时，您是否有更好的解决方法来避免手动滚动？</p><p> 谢谢！</p><p> 编辑：我添加了一段代码，以便更好地理解我所做的。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div id="container"&gt; &lt;p class="fade-in"&gt; &lt;a data-opens="1" href="#"&gt;Hello&lt;/a&gt;.&lt;span data-openedby="1" class="fade-in"&gt; How are &lt;a data-opens="2" href="#"&gt;you&lt;/a&gt;? &lt;/span&gt;&lt;span class="fade-in" data-openedby="2"&gt;&lt;a data-opens="3" href="#"&gt;Welcome&lt;/a&gt; to my website.&lt;/span&gt; &lt;/p&gt; &lt;/div&gt;</pre></div></div><p></p><p> 基本上，这段代码，但不是只有三个&lt;a&gt; ，到目前为止，它有 300 个带有各自的&lt;span&gt; 。</p></div>

[英]How can I automatically center the bottom of a <div> on the viewport?

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使模态背景转到页面底部而不是视口底部？ 将滚动条放在视口的底部 如何自动使底部居中<div>在视口上？</div><div id="text_translate"><p> 我正在创建一种仅基于纯文本、没有图像或其他任何内容的网站/实验，它仅包含一个&lt;div&gt;包含几个&lt;span&gt;和&lt;a&gt;元素，这些元素在使用 JS 点击时打开，显示堆叠的文本在&lt;div&gt;的底部。</p><p> 当屏幕上覆盖的文本过多时，问题就出现了，并且用户不断点击——因此，显示更多文本——这些新行一直堆叠在底部，不会自动可见：用户必须开始滚动到继续阅读。</p><p> 有没有办法可以自动将&lt;div&gt;的底部放在屏幕<em>的</em>中心，所以它不需要滚动？ 当文本填满整个屏幕时，您是否有更好的解决方法来避免手动滚动？</p><p> 谢谢！</p><p> 编辑：我添加了一段代码，以便更好地理解我所做的。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div id="container"&gt; &lt;p class="fade-in"&gt; &lt;a data-opens="1" href="#"&gt;Hello&lt;/a&gt;.&lt;span data-openedby="1" class="fade-in"&gt; How are &lt;a data-opens="2" href="#"&gt;you&lt;/a&gt;? &lt;/span&gt;&lt;span class="fade-in" data-openedby="2"&gt;&lt;a data-opens="3" href="#"&gt;Welcome&lt;/a&gt; to my website.&lt;/span&gt; &lt;/p&gt; &lt;/div&gt;</pre></div></div><p></p><p> 基本上，这段代码，但不是只有三个&lt;a&gt; ，到目前为止，它有 300 个带有各自的&lt;span&gt; 。</p></div> 如何在页面加载时单击剑道网格第一行 如何通过AJAX加载MVC 4应用程序的第一页？ 如何在第一页加载时执行JavaScript函数？ 单击链接，将我带到页面底部，而不是我调用它的位置 如何让Google Chrome浏览器在页面加载时将光标置于此textarea元素中？ 我怎样才能 position 页面底部的元素？ 如何使用 JS 将页面滚动到底部？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM