By the end of this worksheet, you will be able to:

Import fonts from Google Fonts using the @import rule at the top of a CSS stylesheet.
Apply custom fonts to different HTML elements using the font-family property.
Understand the structure of anchor links with href="#id" and how they connect to elements via IDs in the same page.
Retrieve attribute values with jQuery’s .attr() method (e.g. getting an href value from a clicked link).
Use .position().top to measure element position relative to the top of the page.
Animate the scroll position of a page with jQuery’s .animate({ scrollTop }) action for smoothly scrolling within a document.
Combine .stop() with .animate() to manage animation queues and prevent stacked scroll actions. </aside>

`.stop()`

Before getting into today’s topics, let’s introduce a useful jQuery action: .stop()

The .stop() action in jQuery is used to stop animations that are currently running (or pending) on elements. There are situations where animations can be triggered multiple times (like on repeated hover events), which can cause animations to queue up (especially noticeable if the event occurs before the animation completes). .stop() helps by halting the current or queued animations so new ones can run immediately.

Here’s how it’s used:

$('#box').mouseenter(function() {
	$(this).stop().animate({ width: '400px' }, 500);
})

$('#box').mouseleave(function() {
	$(this).stop().animate({ width: '200px' }, 500);
});

Have a look at this example on Codepen to see it in action:

Mouse your mouse on and off each box a few times. Notice how the animations stack up into a queue on the first box, but not the second?

Without .stop(), if you quickly move your mouse in and out of the box, the animations will stack up, causing an ongoing queue of animations to complete. With .stop(), it cancels the current animation queue before starting the new one.

.stop() is only for jQuery animations, like .animate() or .fadeIn() — it won’t affect CSS transitions or JavaScript-based animations outside jQuery.

</aside>

Cool? Let’s begin.

Introduction

This week we’re going to learn two things: First, how to integrate Google fonts into Web sites. Second, how to use a jQuery function called .scrollTop() to smoothly scroll the page to a particular location.

Google Fonts

For the most of the history of Web design, only a few ‘standard’ fonts have been available. A ‘standard’ font is essentially a font that designers could rely on being installed on the user’s computer. If you used a font that wasn’t commonly found on most computers, then the browser would display text using its default font, which was usually Times.