从页面底部滑动div？ [英] Slide in a div from bottom of the page?

问题描述

我正在尝试实现像本页上的效果：

I am trying to the achieve an affect like the one on this page:

使用jquery从页面底部中间向上/向下DIV

但我需要它工作在页面加载与5-6秒的延迟！

but I need it to work on page load with 5-6 seconds delay!

这可以做到只有CSS或纯javascript？如果是，如何？

can this be done only with CSS or pure javascript? if so, how?

感谢

推荐答案

JQUERY ：

使用 window.onload = function ...

setTimeout(function() {
    var top = $('#yourID').position().top;
    document.getElementById('youridhere').scrollIntoView();

}, 5000); // your timeout in ms

JAVASCRIPT

老问题，但如果有人发现这通过谷歌（如我一样），谁不想使用锚或jquery有一个内置的JavaScript函数跳转到一个元素。

old question, but if anyone finds this through google (as I did) and who does not want to use anchors or jquery there's a builtin javascript function to 'jump' to an element.

document.getElementById('youridhere').scrollIntoView();

甚至更好，根据quirksmode的伟大的兼容性表，这是所有主要浏览器均支持！

and what's even better, according to the great compatibility-tables on quirksmode, this is supported by all major browsers!

或
您可以使用锚点聚焦div。 I.e：

OR You can use an anchor to "focus" the div. I.e:

<div id="myDiv"></div>

，然后使用以下javascript：

and then use the following javascript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

另外
看看这个小提琴:) javascript 只滚动动画

http ：//jsfiddle.net/ySeWk/

这篇关于从页面底部滑动div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！