jquery滚动到顶部

Of late there has been a UI trend of page elements (usually navigation items) that scroll with the rest of the page until they reach the top of the browser window. At this point those elements stop moving, while the rest of the page’s content continues to scroll up behind them. This trick – referred to variously as “scroll to top then fixed” or “fixed floating elements” can’t be achieved with CSS alone, at least at this stage; we must integrate some JavaScript (for this example, in the form of JQuery) to pull the effect off.

最近，页面元素(通常是导航项目)的UI趋势随页面的其余部分一起滚动，直到到达浏览器窗口的顶部。 此时，这些元素停止移动，而页面的其余内容继续在它们后面滚动。 这个技巧–至少在现阶段，不能仅靠CSS来实现，即被称为“先滚动到固定然后滚动”或“固定的浮动元素”。 我们必须集成一些JavaScript (在本例中为JQuery形式)以实现效果。

First, let’s create an element to apply the technique to. In my case, it will be a banner, in the form of an article’s header element:

首先，让我们创建一个元素来应用该技术。 就我而言，它将是横幅，以文章的header元素的形式：

<article>
	<header id="fixadent">
		<img src="right-pointing-hand.png" alt style="margin-right:20px">
Fabulous Floating Banner
		<img src="left-pointing-hand.png" alt style="float:right">
	</header>
	<p>… lots and lots of content…
</article>

A couple of points to note; the element I want to apply this effect to could be absolutely anything; in this case, it happens to be a header element. I’m also using absolutely minimal (but still valid) HTML to save space.

需要注意的几点； 我想将此效果应用到的元素绝对可以是任何东西； 在这种情况下，它恰好是header元素。 我还使用绝对最小(但仍然有效)HTML来节省空间。

To this I’ll add some CSS:

为此，我将添加一些CSS ：

header {
	text-transform: uppercase;
	font-size: 38px;
	padding: 20px 0;
}
header img {
	width:106px;
	height: 41px;
	vertical-align: middle;
	float: left;
}

Then the JQuery. We’ll use an alternative shortcut to $(document).ready() to get us started:

然后是JQuery。 我们将使用$(document).ready()的替代快捷方式来开始使用：

$(function() {
	var fixadent = $("#fixadent"),
	pos = fixadent.offset();
	$(window).scroll(function() { 
	if ($(this).scrollTop() > pos.top && $(fixadent.css('position') == 'static')) {
	{ $(fixadent).css('position','fixed'); } 
	})
});
});

The code is pretty simple: we create a variable, fixadent, to act as the reference to our banner with a matching id, and pos, which constantly monitors the position of the element.

代码很简单：我们创建一个变量fixadent ，以作为具有匹配id和pos的横幅的引用，该变量不断监视元素的位置。

When the window scrolls, we check if the scrolled position of the window is greater than the top position of the fixadent element. (Imagine that scrollTop starts at 0, when the vertical scrollbar is at the top of the browser window. scrollTop is incremented by the number of pixels the scrollbar is moved down.) If scrollTop becomes greater than the position of the header element (which is measured from the top of the page, not the browser window), and the element has position: static (i.e. the default), we set it to position: fixed.

当窗口滚动时，我们检查窗口的滚动位置是否大于fixadent元素的顶部位置。 (想象一下，当垂直滚动条位于浏览器窗口的顶部时， scrollTop从0开始。scrollTop随滚动条向下移动的像素数而增加。)如果scrollTop大于标题元素的位置(即从页面顶部开始测量，而不是从浏览器窗口开始测量)， 并且该元素具有position: static (即默认值)，我们将其设置为position: fixed 。

This code is somewhat limited: you may find that the header elements “fires off” a little early, and jumps somewhat. Adding position: fixed via JavaScript still inherits the other CSS we have applied. We’ll adjust the existing style for the header:

这段代码受到了一定的限制：您可能会发现header元素“提前触发”，并有所跳跃。 增加position: fixed通过JavaScript position: fixed ，仍然继承了我们应用的其他CSS。 我们将调整header的现有样式：

header {
	background: linear-gradient(
		to bottom,
		rgba(241,241,228,1),
		rgba(241,241,228,0)
		);
}

And fire the “fixed” state a little sooner by adding to pos.top:

通过添加到pos.top，更快地触发“固定”状态：

if ($(this).scrollTop() > (pos.top + 10) && $(fixadent.css('position') == 'static')) { 
	$(fixadent).addClass('fixed');
}

…and create a class to specify more changes to our element in its fixed position. Anything more than a single change to CSS should usually be written as a class, rather than being applied directly via JavaScript:

…并创建一个class ，以在固定位置为我们的元素指定更多更改。 通常，对CSS所做的任何更改都应作为一个类编写，而不是直接通过JavaScript进行应用：

.fixed {
	position: fixed;
	top: -20px;
}

Now you should be able to see why we added the linear gradient: without it, the header element rather viciously cuts off any text that slides underneath it; the gradient makes the content appear to fade out as it slides up.

现在您应该能够理解为什么我们添加了线性渐变 ：如果没有线性渐变 ，则header元素会恶意剪切掉在其下方滑动的所有文本； 渐变使内容随着向上滑动而逐渐消失。

Finally, we need to free up the <header> element and return it to its original location if the user scrolls back to the top of the page:

最后，如果用户滚动回到页面顶部，我们需要释放<header>元素并将其返回到其原始位置：

$(function() {
	var fixadent = $("#fixadent"), pos = fixadent.offset();
	$(window).scroll(function() { 
		if ($(this).scrollTop() > (pos.top + 10) && fixadent.css('position') == 'static') {
			fixadent.addClass('fixed');
		} else {
		if ($(this).scrollTop() <= pos.top && fixadent.hasClass('fixed')) { 
		fixadent.removeClass('fixed');
	}
   })
});

As always, make sure that you’re imparting useful features and information, not just gimmicks. Tricks on web pages quickly become passé, but good content is eternal.

与往常一样，请确保您在传递有用的功能和信息，而不仅仅是just头。 网页上的技巧很快就过时了，但是好的内容是永恒的。

翻译自: https://thenewcode.com/130/Scroll-To-Top-Then-Fixed-Effect-With-JQuery

jquery滚动到顶部