简体   繁体   English

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

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

I'm trying to achieve an effect similar to the one seen here on Dropbox's landing page. 我想实现一个类似于看到的效果在这里的Dropbox的着陆页上。 Notice that there's a link at the bottom of your browser viewport ('learn more'). 请注意,浏览器视口底部有一个链接(“了解更多”)。 This is always at the bottom of the page on first load. 首次加载时,它始终位于页面底部。 However, it's not fixed to the bottom of the window as you can scroll past it. 但是,它并没有固定在窗口的底部,因为您可以滚动通过它。

Any idea how to achieve this? 任何想法如何实现这一目标? A CSS or jquery solution is fine. CSS或jquery解决方案很好。

It's a link within a div which has the following CSS (the div 's): 这是div的链接,该div具有以下CSS( div ):

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

The important parts there are position:absolute and bottom:50px 重要部分有position:absolutebottom: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.

相关问题 如何使模态背景转到页面底部而不是视口底部? - How can I make my modal background go to the bottom of the page rather than the bottom of the viewport? 将滚动条放在视口的底部 - Place the scrollbar at the bottom of viewport 如何自动使底部居中<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? 如何在页面加载时单击剑道网格第一行 - How can i click kendo grid first row on page load 如何通过AJAX加载MVC 4应用程序的第一页? - How can I load the first page of an MVC 4 application via AJAX? 如何在第一页加载时执行JavaScript函数? - How can I execute a JavaScript function on the first page load? 单击链接,将我带到页面底部,而不是我调用它的位置 - Clicking on a link, takes me to the bottom of the page instead of the place from where I called it 如何让Google Chrome浏览器在页面加载时将光标置于此textarea元素中? - How can I get Google Chrome to place cursor in this textarea element on page load? 我怎样才能 position 页面底部的元素? - How can I position an element at the bottom of the page? 如何使用 JS 将页面滚动到底部? - How can i scroll page to bottom with JS?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM