Reviews

Vertical page scrolling using jQuery and cross-browser compatibility. Smooth page scroll up on jQuery Jquery smooth transition to element

31.07.2020

Reg.ru: domains and hosting

The largest registrar and hosting provider in Russia.

More than 2 million domain names in service.

Promotion, domain mail, business solutions.

More than 700 thousand customers around the world have already made their choice.

Bootstrap framework: fast adaptive layout

Step-by-step video course on the basics adaptive layout in the Bootstrap framework.

Learn how to typesetting simply, quickly and efficiently using a powerful and practical tool.

Layout to order and get paid.

*Mouse over to pause scrolling.

Back forward

Smooth scrolling pages up with jQuery

In this video we will look at such a moment as creating a smooth page scroll up when clicking on a link.

It is often convenient to use the "Back to Top" link when you are closer to the bottom of the page.

You can implement this feature purely using HTML and CSS, but in this video I will show you how you can improve this feature and make it more convenient using the jQuery library.

JavaScript will allow us to ensure smooth movement from the bottom of the page to the top, avoiding the "jerky" that occurs when using a regular "anchor".

They appear only when you scroll down the page by a certain number of pixels, which you can set yourself.

This is also very convenient because it attracts a person’s attention to an interactive element on the page and he notices that there is an opportunity to use such a function.

For a demonstration of the script and a detailed analysis of the code, see the video below.

Brief overview of the lesson (see the video for all the details):

index.html

1. The first thing we need is a file in which the “Back to Top” link itself will be placed. Let it be index.html.

In order for everything to work, in the section head document, we need to include a style file and two JavaScript files (more on them a little later):

First we include the jQuery library, then the script.js file with the code that we write ourselves.

Also in this file we need to place the link itself, when clicked it will lead to a smooth rise to the top of the page:

Top

script.js

2. The second is the script.js file, in which we write functions that perform basic actions:

$(document).ready(function())( $(function ()( $("#back-top").hide(); $(window).scroll(function ()( if ($(this).scrollTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); ).click(function ()( $("body,html").animate(( scrollTop:0 ), 800); return false; ));

So, first we wait until the document is fully loaded and hide our "Back to Top" button so that it is not initially visible on the page.

Next, we capture the window scroll event and if the scroll goes down by 700 pixels or more, then we smoothly display the “Back to Top” button using the method fadeIn. Otherwise, we hide it using the method fadeOut.

In the second anonymous function we track the click event on the link inside the block #back-top and apply the method animate for a smooth rise to the top of the page (scrollTop:0) in 800 ms.

style.css

3. And, thirdly, this is the style file. In our example there is nothing superfluous in it, so there are few styles:

Body ( font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; ) p ( margin-left: 150px; ) /* Back to top button */ #back-top( position: fixed; bottom:10px; left: 0px; ) #back-top a( width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text -decoration:none; background-color: transparent; -moz-transition:1s; ) /* graphic arrow */ #back-top span( width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -moz-transition:1s; ; ) #back-top a:hover span(background-color: rgba(0, 0, 0, 0.3);)

What is worth mentioning is the meaning fixed for property position at the block #back-top. This allows us to fix the position of the button relative to the browser window.

scrolling jquery (21)

I wrote a general purpose function that scrolls a jQuery object, CSS selector or numeric value.

Usage example:

// scroll to "#target-element": $.scrollTo("#target-element"); // scroll to 80 pixels above first element with class ".invalid": $.scrollTo(".invalid", -80); // scroll a container with id "#my-container" to 300 pixels from its top: $.scrollTo(300, 0, "slow", "#my-container");

Function code:

/** * Scrolls the container to the target position minus the offset * * @param target - the destination to scroll to, can be a jQuery object * jQuery selector, or numeric position * @param offset - the offset in pixels from the target position, e.g. * pass -80 to scroll to 80 pixels above the target * @param speed - the scroll speed in milliseconds, or one of the * strings "fast" or "slow". default: 500 * @param container - a jQuery object or selector for the container to * be scrolled. default: "html, body" */ jQuery.scrollTo = function (target, offset, speed, container) ( if (isNaN(target)) ( if (!(target instanceof jQuery)) target = $(target); target = parseInt(target.offset().top); container = container || "html, body"; if (!(container instanceof jQuery)) container = $(container) offset = offset | | 0; container.animate(( scrollTop: target + offset ), speed );

I have this input element:

Then I have other elements like other text inputs, text fields etc.

When the user clicks on this input with #subject , the page should scroll to the last element of the page with a nice animation. It should be a scroll down and not up.

The last item on the page is the submit button with #submit:

The animation should not be too fast and should be fluid.

I'm launching latest version jQuery. I prefer not to install any plugin but rather use the default jQuery functions to achieve this.

When the user clicks on this input with #subject, the page should scroll to the last element of the page with a nice animation. It should be a scroll down and not up.

The last element of the page is a submit button with #submit

$("#subject").click(function() ( $("#submit").focus(); $("#subject").focus(); ));

First scroll down to #submit then #submit the cursor on the input that was clicked, which simulates scrolling down and works in most browsers. It also doesn't require jQuery since it can be written in pure JavaScript.

Could this way of using the focus function simulate the animation better, by chaining calls to focus . I haven't tested this theory, but it would look something like this:

#F > * ( width: 100%; ) .. .. .. .. $("#child_N").click(function() ( $("#child_N").focus(); $("#child_N +1").focus(); .. $("#child_K").focus(); $("#child_N").focus(); ));

jQuery(document).ready(function($) ( $("a").bind("click.smoothscroll",function (e) ( e.preventDefault(); var target = this.hash, $target = $( target); $("html, body").stop().animate(( "scrollTop": $target.offset().top-40 ), 900, "swing", function () ( window.location.hash = target; ));

Section 1
Section 2
Section 3

Animations:

// slide to top of the page $(".up").click(function () ( $("html, body").animate(( scrollTop: 0 ), 600); return false; )); // slide page to anchor $(".menutop b").click(function())( //event.preventDefault(); $("html, body").animate(( scrollTop: $($(this). attr("href")).offset().top ), 600 return false )); // Scroll to class, div $("#button").click(function() ( $("html, body").animate(( scrollTop: $("#target-element").offset().top ), 1000); // div background animate $(window).scroll(function () ( var x = $(this).scrollTop(); // freezze div background $(".banner0").css("background-position", " 0px " + x +"px"); // from left to right $(".banner0").css("background-position", x+"px " +"0px"); // from right to left $( ".banner0").css("background-position", -x+"px " +"0px"); // from bottom to top $("#skills").css("background-position", "0px " + -x + "px"); // move background from top to bottom $(".skills1").css("background-position", "0% " + parseInt(-x / 1) + "px" + ", 0% " + parseInt(-x / 1) + "px, center top"); // Show hide mtop menu if (x > 100) ( $(".menu").addClass("menushow"); $(".menu").fadeIn("slow"); $(".menu").animate((opacity: 0.75), 500); else ( $(".menu").removeClass("menushow" ); $(".menu").animate((opacity: 1), 500 )); // progres bar animation simple $(".bar1").each(function(i) ( var width = $(this).data("width"); $(this).animate(("width" : width + "%" ), 900, function())( // Animation complete ));

This is my approach abstracting IDs and href"s using a universal class selector

$(function() ( // Generic selector to be used anywhere $(".js-scroll-to").click(function(e) ( // Get the href dynamically var destination = $(this).attr(" href"); // Prevent href=“#” link from changing the URL hash (optional) e.preventDefault(); // Animate scroll to destination $("html, body").animate(( scrollTop: $(destination ).offset().top ), 500 ));

Item 1
Item 2
Item 3

Using this simple script

If($(window.location.hash).length > 0)( $("html, body").animate(( scrollTop: $(window.location.hash).offset().top), 1000); )

What I would do in sorting is that if a hash tag is detected in the URL, scrollTo animates its ID. If the hash tag is not found, then ignore the script.

Var scrollTo = function($parent, $element) ( var topDiff = $element.position().top - $parent.position().top; $parent.animate(( scrollTop: topDiff ), 100); );

If you don't care much about the smooth scrolling effect and are just interested in scrolling to a specific element, you don't need some jQuery function to do this. Javascript has your thing:

So all you have to do is: $("selector").get(0).scrollIntoView();

Get(0) is used because we want to get the JavaScript DOM element, not the JQuery DOM element.

If you're only handling scrolling to an input element, you can use focus() . For example, if you want to scroll to the first visible input:

$(":input:visible").first().focus();

Or the first visible entry into the container with class .error:

$(".error:input:visible").first().focus();

Thanks to Tricia Ball for this!

The easy way achieving page scroll for target div id

Var targetOffset = $("#divID").offset().top; $("html, body").animate((scrollTop: targetOffset), 1000);

$("html, body").animate(...) not for me on iphone, browser Chrome browser Chrome.

I needed to customize the target content element on the page.

$("#Content"). Animate (...)

This is what I ended up with

If (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) ( $("#content").animate(( scrollTop: $("#elementtoScrollToID").offset().top ), "slow"); ) else( $("html, body").animate(( scrollTop: $("#elementtoScrollToID").offset().top ), "slow"); )

All body content is connected using #content div

.... ....

Assuming you have a button with a button id, try this example:

$("#button").click(function() ( $().animate(( scrollTop: $("#elementtoScrollToID").offset().top ), 2000); ));

I wrote this lightweight plugin to make page/element scrolling easier. It is flexible where you can pass in the target element or given value. Perhaps this could be part of jQuery's official release, what do you think?

Examples of using:

$("body").scrollTo("#target"); // Scroll screen to target element $("body").scrollTo(500); // Scroll screen 500 pixels down $("#scrollable").scrollTo(100); // Scroll individual element 100 pixels down

Options:

scrollTarget: An element, line, or number that indicates the desired scroll position.

offsetTop: A number that specifies the extra space above the scroll.

duration: A string or number that specifies how long the animation will take to run.

easing: A string indicating which attenuation function to use for the transition.

complete: A function to call after the animation has completed.

To show the full element (if possible with the current window size):

Var element = $("#some_element"); var elementHeight = element.height(); var windowHeight = $(window).height(); var offset = Math.min(elementHeight, windowHeight) + element.offset().top; $("html, body").animate(( scrollTop: offset ), 500);

I have this input element:

Then I have other elements such as other text inputs, text fields, etc.

When the user clicks on input with #subject , the page should scroll to the last page element with a nice animation. It should be a scroll down and not up.

The last element of the page is a submit button with #submit:

Animation should not be too fast and should be fluid.

I'm running the latest version of jQuery. I prefer not to install any plugin but use the default jQuery functions to achieve this.

30 answers

Assuming you have a button with a button id, try this example:

$("#button").click(function() ( $().animate(( scrollTop: $("#elementtoScrollToID").offset().top ), 2000); ));

I wrote this lightweight plugin to make page/element scrolling easier. It's flexible where you could pass in a target element or a given value. Perhaps this could be part of the next official jQuery release, what do you think?

Examples of using

Options:

scrollTarget: An element, string, or number that specifies the desired scroll position.

offsetTop: A number specifying the additional space above the scroll target.

duration: A string or number specifying how long the animation will run.

easing: A string indicating which easing function to use for the transition.

complete: function to call after the animation is complete.

If you don't care much about the smooth scrolling effect and are just interested in scrolling to a specific element, you don't need some jQuery function to do this. Javascript has your thing:

So all you have to do is: $("selector").get(0).scrollIntoView();

Get(0) is used because we want to get the JavaScript DOM element, not the JQuery DOM element.

Using this simple script

If($(window.location.hash).length > 0)( $("html, body").animate(( scrollTop: $(window.location.hash).offset().top), 1000); )

Would do in sorting that if a hash tag is found in the URL, scrollTo animates the ID. If no hash tag is found then ignore the script.

Section 1
Section 2
Section 3

Steve and Peter's solution works very well.

But in some cases, you may have to convert the value to an integer. Oddly enough, the return value from $("...").offset().top is sometimes in a float .
Usage: parseInt($("....").offset().top)

For example:

$("#button").click(function() ( $("html, body").animate(( scrollTop: parseInt($("#elementtoScrollToID").offset().top) ), 2000); ) );

Compact version of the "animated" solution.

$.fn.scrollTo = function (speed) ( if (typeof(speed) === "undefined") speed = 1000; $("html, body").animate(( scrollTop: parseInt($(this).offset ().top) ), speed);

Basic usage: $("#your_element").scrollTo();

If you are only scrolling to the input element, you can use focus() . For example, if you want to scroll to the first visible input:

$(":input:visible").first().focus();

Or the first visible entry into the container with class .error:

$(".error:input:visible").first().focus();

In most cases it would be better to use a plugin. Jokes aside. I'm going to . Of course there are others. But please check that they actually avoid the pitfalls you need the plugin for in the first place - not all of them.

I've written about reasons for using the plugin elsewhere. In a nutshell, the one liner behind most of the answers here

$("html, body").animate(( scrollTop: $target.offset().top ), duration);

Bad UX.

The animation does not respond to user actions. It runs even if the user clicks, shorts, or tries to scroll.

If the animation's starting point is close to the target element, the animation is painfully slow.

If the target element is located near the bottom of the page, it cannot be scrolled to the top of the window. The scrolling animation stops abruptly, then mid-motion.

To deal with these problems (and a bunch of others), you can use my plugin, jQuery.scrollable. Then the call will be

$(window).scrollTo(targetPosition);

As for the target position, $target.offset().top gets the job done in most cases. But be aware that the return value does not take the html element into account (see this demo). If you need the target position to be accurate under all circumstances, it is better to use

TargetPosition = $(window).scrollTop() + $target.getBoundingClientRect().top;

This works even if the border is set to the html element.

This is my approach, abstracting id and href"s using a universal class selector

$(function() ( // Generic selector to be used anywhere $(".js-scroll-to").click(function(e) ( // Get the href dynamically var destination = $(this).attr(" href"); // Prevent href="#" link from changing the URL hash (optional) e.preventDefault(); // Animate scroll to destination $("html, body").animate(( scrollTop: $(destination ).offset().top ), 500 ));

Item 1
Item 2
Item 3

A very simple and easy to use custom jQuery plugin. Just add a scroll= attribute to your clickable element and set its value to the selector you want to scroll.

Also: Click me. It can be used for any element.

(function($)( $.fn.animateScroll = function())( console.log($("")); $("").click(function())( selector = $($(this).attr( "scroll")); console.log(selector); console.log(selector.offset().top); $("html body").animate((scrollTop: (selector.offset().top)), //- $(window).scrollTop() 1000); // RUN jQuery(document).ready(function($) ( $().animateScroll(); )); // IN HTML EXAMPLE // RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR" // Click To Scroll

animations:

$("html, body").animate(...) is not for me on iphone, chrome browser browser.

I needed to customize the target content element on the page.

$("# contact"). Animate (...)

This is what I ended up with

Entire body content bound to C#content div

.... ....

If you want to do scrolling in the overflow container (instead of $("html, body") which was above) while also working with absolute positioning, this is the way to go:

Var elem = $("#myElement"), container = $("#myScrollableContainer"), pos = elem.position().top + container.scrollTop() - container.position().top; container.animate(( scrollTop: pos )

Section 1
Section 2
Section 3

$("html, body").animate((scrollTop: Math.min($(to).offset().top-margintop, //margintop is the margin above the target $("body").scrollHeight-$ ("body").height()) //if the target is at the bottom ), 2000);

To show the full element (with the current window size if possible):

I wrote a general purpose function that scrolls through a jQuery object, CSS selector, or numeric value.

Usage example:

Function code:

It has long since taken root among developers.
So. With the help of the plugins presented in this collection, you can create a modern website with excellent dynamics. I think every person who is interested in website development has seen these plugins in action. When scrolling the page, blocks, various elements or text smoothly appear, move out, spin, etc. As practice shows, clients really like such fancy stuff.
Implementing scrolling effects on a page is not as difficult as it might seem at first glance. All you need is a high-quality plugin and direct hands. Of course, a novice layout designer may experience difficulties, but if you sit for a while, understand the principles of operation, the task will seem very simple.
Despite the fact that many people like animation on the site, you should not overdo it, otherwise you will end up with an overloaded, visually poorly perceived page in which all attention will be focused on all these “whistles”, and not on the information that needs to be conveyed to the visitor . In addition, the more scripts are connected, the slower the page works. In older browsers this whole thing may not work at all. Connect effects wisely. Often, a simple smooth, unobtrusive appearance of blocks is enough. This effect gives the page smoothness and dynamics, making the site alive. In my practice, I have seen a lot of sites with effects without a sense of proportion. This just makes me sick - the only feeling that arises. But, probably, the developers were hoping for a “Wow effect”. So. Use everything wisely and in moderation!
All plugins are absolutely free, but I would recommend familiarizing yourself with the licenses, as in some cases you need to meet a number of conditions to use them for commercial purposes.

WOW.jsA good plugin for implementing animation of elements when scrolling. It has a lot of animated options for block appearances and is quite easy to customize. ScrollMagic Another popular plugin with which you can implement complex animations that will trigger when the mouse roller scrolls. In this case, the plugin allows you to create really complex motion effects, changing the background of the page and generally deforming shapes. ScrollMagic is often used on promotional sites that require a lot of animation.

ScrollmeA simple and lightweight plugin with which you can implement spectacular animation when scrolling. You can scale, rotate, move, reduce or increase the transparency of any element.

Superscrollorama Superscrollorama is a powerful but heavy plugin for creating scrolling animations. His arsenal includes many various settings for animation of text, individual DIV elements, including effects.
More detailed information can be found in the documentation for this jQuery plugin.

onScreen is an excellent plugin that we often use in our projects. It allows you to easily and quickly create various effects for the appearance of elements when scrolling a page. The plugin is lightweight and does not load the page.

OnePagejQuery OnePage plugin allows you to split a page into separate screens with a height of 100% and animate the transition across them. All it takes is a gentle nudge to start scrolling to the next screen. The same effect was used on the 5s promotional site.
There are problems with, as with almost all similar plugins. If the text does not fit in height, it is simply cut off and the scroll bar does not appear.

FSVS Very similar in functionality to the previous plugin. Allows you to make sliding scrolling across screens using css3. Has a similar problem when viewing on phones. Navigating through the screens in the form of separate slides is possible either using the mouse roller or by clicking on the dot side navigation.

jInvertScrolljInvertScroll allows you to create cool horizontal parallax scrolling. When you roll the mouse roller down, all the elements on the page move horizontally, and with at different speeds, which creates a parallax effect.

WaypointsWaypoints is a jQuery plugin that allows you to show any element when the visitor is at a given point on the page. For example, when a visitor finishes reading an article on a website and approaches the end of the text, an information window pops up on the side of the page asking him to read the next article or a similar article.

ScrollocueOriginal plugin for specific tasks. Allows you to move around the page by selecting blocks by simply right-clicking on the page. With each new click, the element below is highlighted, thereby scrolling the page a little. Scrolling with arrow keys on the keyboard is also supported.

Scrolling Progress BarAn interesting solution with which you can show the progress of reading information on a page. It is also possible to divide the text into sections and all this will be visually displayed in any place convenient for you on the page.

multiScroll.jsmultiScroll.js is a jQuery plugin similar to the two previous slip screen plugins, but has one significant difference. If in previous cases the screen was simply flipped, then this one is more like a modern image slider. The screen is divided into two equal parts and the left one scrolls up and the right one scrolls down. This way the content is practically torn apart.
This plugin can be used, for example, to create a portfolio of a photographer or designer. I think visitors will appreciate your site.

browserSwipe.jsAnother full-screen scrolling plugin, with which you create an effective transition across screens. Available effects include sliding transition, transition with full screen rotation, scaling and horizontal scrolling across screens. You can combine all effects on one page.

jQuery.panelSnap Fullscreen sliding scrolling plugin. At first glance, the plugin is no different from the previous ones, but it has an internal scrolling area. If we scroll to the end of the internal content, then the transition to next screen. Theoretically, this is a solution to the problem for responsive websites. If the inner window is made full size, on small screens content that does not fit in height will not be lost.

Today we will practice with jQuery again. We will write a script for smooth scrolling when a button is pressed. Let's make sure that when the button is pressed, the user is smoothly transferred to required block. This script can be used to create a beautiful anchor menu.

Here is the script we will need.

The script consists of a function, the only parameter of which is a variable with the value id of the block where you want to make a smooth transition.

Inside the function, the first line creates a variable offset with the value 0.

animate – allows you to perform custom animation based on change CSS properties for selected elements.

scrollTop – Gets the scroll top padding value for the first element in the set.

Where it is 1000, the duration of the transition is indicated. By changing this time you speed up or slow down the scrolling.

How it works?

Let's write a test code on which we will try our script in action.

Document #block1 ( margin: 1200px 0px 100px 0px ; ) Request a call! Hello! function slowScroll(id) ( var offset = 0; $("html, body").animate(( scrollTop: $(id).offset().top - offset ), 1000); return false; )

Here is a regular HTML template.

In order for the script to work, you need to include the jquery library.

Also, for clarity, I made an indent between the tested elements to show the scroll. I didn't bother creating separate file for styles, and wrote everything inside the head tag.

Request a call!

In the href attribute we indicate the block to which we need to make a transition; this is written in case smooth scrolling does not work, so that the user is transferred smoothly to the selected block. In the onclick event, we indicate the name of the function and as a parameter we indicate the id of the block to which we want to make a smooth transition.