我偶然发现了这篇文章:JavaScript的Revealing Module Pattern.我想在我的项目中使用它.
让我们想象一下我有一个函数abc
,我在我的主JavaScript文件中调用该函数.
这种模式会使事情变得不同吗?谁能告诉我这种模式的基本例子?
我一直在寻找一种方法来向下滚动时单击位于页面顶部的按钮仅使用CSS3.
所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示:http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但是由于我只是希望浏览器向下滚动页面顶部的一个按钮向下滚动,所以它有点太高级了,所以我想知道:是否可以在没有输入按钮的情况下进行那些CSS滚动,只是带锚标记?
HTML看起来像这样: <a href="#" class="button">Learn more</a>
我已经有一些CSS需要在按钮点击时触发:
/* Button animation tryout. */
.animate {
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
Run Code Online (Sandbox Code Playgroud) 是否可以使用平滑滚动来锚定链接但没有 jQuery
?我正在创建一个新网站,我不想使用jQuery
.
我想在页面的开头有4个按钮/链接,在它们下面有内容.
在按钮上我把这个代码:
<a href="#idElement1">Scroll to element 1</a>
<a href="#idElement2">Scroll to element 2</a>
<a href="#idElement3">Scroll to element 3</a>
<a href="#idElement4">Scroll to element 4</a>
Run Code Online (Sandbox Code Playgroud)
在链接下将有内容:
<h2 id="idElement1">Element1</h2>
content....
<h2 id="idElement2">Element2</h2>
content....
<h2 id="idElement3">Element3</h2>
content....
<h2 id="idElement4">Element4</h2>
content....
Run Code Online (Sandbox Code Playgroud)
它现在正在工作,但不能让它看起来更顺畅.
我使用了这段代码,却无法使用它.
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
Run Code Online (Sandbox Code Playgroud)
有什么建议?谢谢.
编辑:和小提琴:http://jsfiddle.net/WxJLx/2/
当在position: fixed
元素上按下鼠标按钮时,如何使视口逐渐向下滚动?