toplink jpa_jQuery topLink插件

toplink jpa

Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery.

上周，我发布了MooTools的代码片段，使您可以淡入和淡出任何页面上的“至顶部”链接。 这是使用jQuery实现该功能的方法。

View Demo 观看演示

XHTML (The XHTML)

<a href="#top" id="top-link">Top of Page</a>

A simple link.

一个简单的链接。

CSS (The CSS)

#top-link	{ display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }

A little CSS for position and style.

位置和样​​式的一些CSS。

jQuery JavaScript (The jQuery JavaScript)

//plugin
jQuery.fn.topLink = function(settings) {
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200
	}, settings);
	return this.each(function() {
		//listen for scroll
		var el = $(this);
		el.hide(); //in case the user forgot
		$(window).scroll(function() {
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};

//usage w/ smoothscroll
$(document).ready(function() {
	//set the link
	$('#top-link').topLink({
		min: 400,
		fadeSpeed: 500
	});
	//smoothscroll
	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});

You'll see that I've added jQuery's ScrollTo plugin to add some smoothness to the anchor.

您会看到我已经添加了jQuery的ScrollTo插件来为锚点添加一些平滑度。

Please note that this version doesn't work with Internet Explorer due to IE's lack of CSS "position:fixed" support. Here is a shotty attempt at IE support:

请注意，由于IE缺少CSS对“ position：fixed”的支持，因此该版本不适用于Internet Explorer。 这是对IE支持的简单尝试：

//plugin
jQuery.fn.topLink = function(settings) {
		settings = jQuery.extend({
			min: 1,
			fadeSpeed: 200,
			ieOffset: 50
		}, settings);
		return this.each(function() {
			//listen for scroll
			var el = $(this);
			el.css('display','none'); //in case the user forgot
			$(window).scroll(function() {
				//stupid IE hack
				if(!jQuery.support.hrefNormalized) {
					el.css({
						'position': 'absolute',
						'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
					});
				}
				if($(window).scrollTop() >= settings.min)
				{
					el.fadeIn(settings.fadeSpeed);
				}
				else
				{
					el.fadeOut(settings.fadeSpeed);
				}
			});
		});
	};

View Demo 观看演示

Know of a better way to incorporate IE support? Share it!

知道整合IE支持的更好方法吗？ 分享它！

翻译自: https://davidwalsh.name/jquery-top-link

toplink jpa