Scroll To Topscroll Top, Home, Back And Email Icons

You will keep scrolling using your mouse to see more and more updates and then when you want to go up to the top of the page, you might move your hand from your mouse to keyboard to search for Home key or you will drag the scroll bar to the top. Scroll To Top tries to minimize this effort by providing an intuitive icon at the bottom-right.
Also known as a scroll-to-top button or go-to-top image, the sticky back-to-top button is a helpful navigation element that helps users get back to the top of the web page they’re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it’s always.
I love photoshop and trying out new things with it. I like creating social media icons, logos etc. I’m not a professional graphic designer but I love creating and learning new things. A while ago I found this tutorial by Rylee Blake on how to add scroll to top buttons in blogs. So I went and made one of my own.

Scroll To Topscroll Top Home Back And Email Icons List
Scroll To Topscroll Top Home Back And Email Icons Without

The Apple Watch can display seven different status icons at the top of the display, including the mysterious 'red dot.' Not all of them are easy to interpret, so here's an annotated list.

Scroll to topscroll top home back and email icons free

In this tutorial, I’ll show you how to add animated back to top button with CSS and jQuery to your website. This light-weight approach will enhance usability with a back to top button whilst making use of hardware-accelerated animation as all animations will be handled by native CSS3 properties.

Prerequisites

Scroll To Topscroll Top, Home, Back And Email Icons

I am going to assume that you already have hooked jQuery up to your site. The JavaScript should be called below your jQuery script tag to ensure you don’t get an ‘undefined jQuery’ error in your console. I cannot guarantee support for old browsers such as Internet Explorer 10 and below.

The approach

The transitions are made by simply adding classes to your body element. The advantage of this approach is that you can completely tailor your animation requirements in the stylesheet without having to change any CSS. Furthermore, there is no need to add a ‘back to top’ anchor to your HTML, this is done by jQuery once the class has been initiated.

Step 1 – Add the JavaScript snippet

Create a new file in your project directory, in this example, I will call it ‘back-to-top,js’. In the file, copy and paste the following snippet in:

/globals jQuery:false / (function ($) { 'use strict'; var backToTop = function () { / @type {number} / this.windowHeight = 0; /* @type {number} / this.fromTop = 0; /* @type {{}} / this.body = {}; /* @type {{}} / this.window = {}; /* @type {{}} / this.backToTopCta = {}; /* @type {{}} / this.scrollSelector = {}; /* * Initiates the class. * * @return {backToTop} / this.init = function () { var self = this; self.body = $('body'); self.window = $(window); self.scrollSelector = $('html,body'); self.setWindowHeight() .bindWindowResizeEvent() .bindWindowScrollEvent() .triggerScrollEvent() .addBackToTopCta() .bindBackToTopClickEvent(); return self; }; /* * Triggers scroll event. * Handy when you enter the page mid-way after following a link with an anchor. * * @return {backToTop} / this.triggerScrollEvent = function () { var self = this; self.window.scroll(); return self; }; /* * Binds the window resize event. * * @return {backToTop} / this.bindWindowResizeEvent = function () { var self = this; self.window.resize(function () { self.setWindowHeight() .triggerScrollEvent(); }); return self; }; /* * Binds the scroll event. * * @return {backToTop} / this.bindWindowScrollEvent = function () { var self = this; self.window.scroll(function () { self.fromTop = self.window.scrollTop(); if (self.fromTop >= self.windowHeight) { self.addScrollClass(); } else { self.removeScrollClass(); } }); return self; }; /* * Binds the back to top click event. * @return {backToTop} / this.bindBackToTopClickEvent = function () { var self = this; self.backToTopCta.click(function (e) { e.preventDefault(); self.addAnimateClass() .removeScrollClass() .scrollSelector.animate({scrollTop: 0}, 'slow', function () { self.removeAnimateClass(); }); }); return self; }; /* * Adds body class for scrolling. * * @return {backToTop} / this.addScrollClass = function () { var self = this; if (false self.body.hasClass('scroll-top')) { self.body.addClass('scroll-top'); } return self; }; /* * Removes body class for scrolling. * * @return {backToTop} / this.removeScrollClass = function () { var self = this; if (self.body.hasClass('scroll-top')) { self.body.removeClass('scroll-top'); } return self; }; /* * Adds body class for animating. * * @return {backToTop} / this.addAnimateClass = function () { var self = this; if (false self.body.hasClass('scroll-top-animating')) { self.body.addClass('scroll-top-animating'); } return self; }; /* * Removes body class for animating. * * @return {backToTop} / this.removeAnimateClass = function () { var self = this; if (self.body.hasClass('scroll-top-animating')) { self.body.removeClass('scroll-top-animating'); } return self; }; /* * Sets the window height. * * @return {backToTop} / this.setWindowHeight = function () { var self = this; self.windowHeight = self.window.height(); return self; }; /* * Adds the back to top Cta. * * @return {backToTop} / this.addBackToTopCta = function () { var self = this; self.backToTopCta = $(') .attr('title', 'Back to top') .attr('href', '#top') .addClass('back-to-top_cta') .html('Back to top'); self.body.append(self.backToTopCta); return self; }; }; /* * Initiates once the DOM is prepared. */ $(document).ready(function () { (new backToTop()).init(); }); })(jQuery);