7 'Scroll to Top' solutions on jQuery

7 Scroll to Top решений на jQuery

'Scroll to Top' button - an addition for pages with a lot of content and blogs with long messages.

The need to use anchors on the site arises very often. Basically, they are used in large web documents that have content in the form of links. By clicking on such a link, an instantaneous jump to the desired section of the page occurs. In this article, I want to show how to make this transition smooth using a small script. That is, instead of an instantaneous transition, the page will smoothly scroll to the desired place. And it does not matter where the anchor will be: above the link or below.

In this top you will find a lot of jQuery solutions, as well as one-click solutions that allow your visitors to smoothly scroll right to the top of the page, making your website more user-friendly.

First, let's define what an anchor is (suddenly someone does not know). An anchor is a bookmark with a unique name on a specific place on the web page, designed to create a jump to it by reference.

To create an anchor, first make a bookmark in the appropriate place and give it a name using the name attribute of the tag, or simply assign an id attribute with the desired value to a tag (this method is used more often, so the script will be targeted to it). In both cases, the name of the anchor must be unique within the page. 

  <a name="razdel1"> </a>
 <Div id = "# razdel1"> ... </ div>

The href value for the jump to this anchor is the name of the bookmark with the lattice symbol (#) in front. 

 <a href="#razdel1"> Go to section 1 </a>

Let's return to smooth transitions. So, the script should work by clicking on links whose href attribute starts with the "#" grid. In jQuery, you can do this: 

  $ ('A [href ^ = "#"]'). Click (function () {
  // ...
 });

Then you need to save the value of the href attribute in the variable: 

 Var target = $ (this) .attr ('href');

To change the value of the scroll indent from above, we will use the scrollTop method. Smoothness will be realized by the animate function. This is the final form of our script for smooth scrolling: 

  $ (Function () {
  $ ('A [href ^ = "#"]'). Click (function () {
  Var target = $ (this) .attr ('href');
  $ ('Html, body'). Animate ({scrollTop: $ (target) .offset (). Top}, 300);
  Return false; 
  }); 
 });

Offset (). Top specifies the value of the top margin for the anchor (with id equal to the value of the href attribute), which is set to scrollTop . In the end, do not forget to put return false to undo the default action. Now you just need to insert this code into the pages you need (or connect it with a separate file) and everything will work. Good luck!

Additional solutions for smooth scrolling to a link ...

1. jQuery topLink Plugin

The topLink jQuery plugin developed by David Walsh, shows a pop-up button "up the page" when the user has moved down the site.

2. The disappearing "Scroll to top" link with jQuery and CSS

With a detailed description of how to create a scrolling "up the page" based on CSS and jQuery.

3. The disappearing "Scroll to top" link with jQuery and CSS

A simple button "up the page" in the right bottom corner of the site. The code uses the development of the first two scrolls and is more optimized than the previous two solutions, but with the effect of fading and smooth scrolling.

4. jQuery Plugin: Scroll to Top

Easy to install, jQuery script that adds vanishing scrolling to a page of the site with an animated scrolling, with normal Reference.

5. UItoTop jQuery Plugin

Inspired by the great idea about jQuery by David Walsh topLink Plugin, Matt Veroone made a similar plug-in, but with two major differences, this one does not require for work so that you add extra html markup or additional plug-ins. This solution will only work when the JavaScript user is enabled. Here! This script uses

6. jQuery Scroll to Top Control v1.1

This script displays on-screen management in the lower-right corner of the site page, which when clicked gently scrolls the page back to the top. Instead of always being visible on the user's screen, the script allows you to determine how far below (in pixels) on the user's page show control.

7. Smooth GoToTop WordPress plugin

A smooth scrolling script developed by Ariel Flesler and Mohosan Bogdan as a plug-in for WordPress. On the plug-in settings page you can configure css, vanishing speed and minimum height in pixels.