dojo的使用_使用Dojo滚动“转到顶部”链接

dojo的使用

One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go To Top" anchor fades into view. Simple, stylish, and functional -- the definition of a good JavaScript-powered enhancement. I've showed you how to accomplish this task using jQuery and MooTools; here's how you can accomplish that same effect using Dojo.

在我的博客上发布的最流行的代码片段之一是滚动的“转到顶部”链接片段。 该代码段的前提很简单：一旦用户滚动某个元素(通常是BODY元素)超过给定的阈值，“ Go To Top”锚点就会淡入视图。 简单，时尚且功能强大-定义了良好JavaScript驱动的增强功能。 我已经向您展示了如何使用jQuery和MooTools完成此任务； 这是使用Dojo可以达到相同效果的方法。

View Demo 观看演示

HTML (The HTML)

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>
<!-- you could also create this dynamically using dojo -->

Just a simple "top" link.

只是一个简单的“顶部”链接。

CSS (The CSS)

	#gototop { visibility:hidden; position:fixed; right:5px; bottom:5px; color:#999; font-weight:bold; text-decoration:none; border:1px solid  #ccc; background:#eee; padding:10px; }

It's important to hide the element during the initial page load.

在初始页面加载期间隐藏元素很重要。

Dojo JavaScript (The Dojo JavaScript)

dojo.ready(function() {
	var link = dojo.byId("gototop");
	dojo.style(link,{ opacity: 0, visibility:"hidden" });
	dojo.connect(window,"onscroll",function(e) {
		var scrollY = -dojo.position(dojo.body()).y, thresh = 100;
		dojo.anim(topLink, { opacity: (scrollY > thresh ? 1 : 0 ) });
	});
});

When the DOM is ready we grab the link, styling it so that it will hidden via visibility instead of display. On each scroll of the body, we calculate the position of the page and show or hide the link depending on the page position. Easy!

DOM准备就绪后，我们将对链接进行样式设置，以使其通过可见性而不是显示方式隐藏。 在正文的每个滚动轴上，我们计算页面的位置，并根据页面位置显示或隐藏链接。 简单！

View Demo 观看演示

There you have it. Another framework, another flavor of JavaScript, another awesome snippet. Happy scrolling!

你有它。 另一个框架，另一个JavaScript风格，另一个很棒的摘要。 滚动愉快！

翻译自: https://davidwalsh.name/scrolling-link

dojo的使用