mootools_使用MooTools的“顶级”水印

最新推荐文章于 2024-10-02 15:35:50 发布

culuo8053

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量98

点赞数

文章标签：定位 css python vue html ViewUI

原文链接：https://davidwalsh.name/mootools-watermark

版权

mootools

Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is that I may want to get to the top of the page from somewhere in the middle. Using MooTools, we can create a "top" link as a watermark that follows the users down the page.

每当您的页面内容很长时，通常都希望在页面底部添加一个“顶部”锚链接，以便您的用户不必永远滚动即可到达顶部。这种方法的唯一问题是，我可能想从中间某个地方到达页面顶部。使用MooTools，我们可以创建“顶部”链接作为水印，使用户跟随页面。

View Demo 观看演示

XHTML (The XHTML)


<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

Place this anywhere inside the page that you would like.

将此放置在您想要的页面内的任何位置。

CSS (The CSS)


#gototop { display:none; position:fixed; right:5px; bottom:5px; }

This code positions the element in a fixed position so it always stays in the same spot.

此代码将元素定位在固定位置，因此它始终位于同一位置。

MooTools JavaScript (The MooTools JavaScript)



/* smoothscroll - scroll smoothly to the top*/
new SmoothScroll({duration:500});

/* go to top after 300 pixels down */
var gototop = $('gototop');
gototop.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
	gototop.fade((window.getScroll().y > 300) ? 'in' : 'out')
});

The code is surprisingly short. Of course we use SmoothScroll to make the transition smoothe. You may adjust the pixel trigger amount however you'd like. Unfortunately the above code doesn't work in IE6.

代码很短。当然，我们使用SmoothScroll使过渡平滑。您可以根据需要调整像素触发量。不幸的是，以上代码在IE6中不起作用。

IE修复 (The IE Fix)


/* go to top */
var gototop = $('gototop');
gototop.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
	if(Browser.Engine.trident4) {
		gototop.setStyles({
			'position': 'absolute',
			'bottom': window.getPosition().y + 10,
			'width': 100
		});
	}
	gototop.fade((window.getScroll().y > 300) ? 'in' : 'out')
});

View Demo 观看演示

I like this method so much that I use it on my website.

我非常喜欢这种方法，因此可以在我的网站上使用它。