jQuery Snippets: Scroll to Top

jQuery Snippets: Scroll to Top
This simple and straightforward jQuery code snippet can be used to easily create a "scroll to top" effect on any of your pages or projects. If you've not familiar with the scroll to top concept, it basically involves a link or button of some sort that is typically placed in the bottom corner of a page. When the link or button is clicked, the page scrolls smoothly back up to the top, so that the user doesn't have to scroll manually.

Here's the code that you'd need to implement this effect on your pages or projects:


Let's start with HTML for a scroll to top link. It should be pretty straightforward, and look something like this:

<a href="#" class="to-top">Back to Top</a>

The text can say anything you'd like, and you should feel free to get creative with the styling. Many designers and developers prefer links that resemble buttons, rather than plain text links, for this particular purpose.

The jQuery

Like the HTML, the jQuery for this effect is actually quite simple. Take a look at the snippet below to see for yourself how it works:

$(document).ready(function() {
    $('.to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 300);

As you can see, when the 'to-top' link is clicked, the animation method is applied to the html and the body elements, using the scrollTop value, which scrolls the entire page back up to the top. The numerical value (in this case, 300) defines the speed at which it should take for the page to scroll back up to the top in milliseconds. 

3 Really Fun jQuery Plugins

Sometimes, web developers just wanna have fun. If you can relate to this, then you'll probably love this list we put together of 3 of our favorite super fun jQuery plugins that you can add to your projects. They may not be the most useful or practical plugins around, but they sure are fun to play with.

1. Raptorize

Raptorize is a really fun plugin that you can use to add a raptor (you know, everyone's favorite scary extinct giant lizard with the razor sharp claws) to any web page. You can have it pop up just about anywhere you like, and it even comes complete with sound effects. Roar!

BoingPic is a very fun, interactive plugin that you can use to add some crazy interactive effects to images. When you move your cursor over an image, you can use BoingPic to have the image explode based upon where the cursor lands or is moving. It's a really cool, really interesting, and overall super fun jQuery plugin that you can use to play around with images.

This plugin turns a regular 3D cube into an ever-changing, mutating, rotating monster. Well, it's not like any monsters we've ever seen before, but it has about half a dozen legs and it looks like it could probably eat a person, so if that's not scary, then what is? A really cool plugin to add to any project seeking to be different or creative.  

7 jQuery Plugins for Mobile Friendly Projects

If you're not designing and coding every single project that you do with mobile in mind, then you're probably doing something wrong. Even if you're not coding mobile first designs, they should at the very least be mobile friendly because, you know, it's 2017 and we're living in an ever-expanding mobile world.

Every project you create should look great on a tiny screen, be touch enabled, and, of course, function across all viewport sizes. If you find yourself needing help with any of the above, check out this list of great free and lightweight jQuery plugins that will help you to easily build more engaging and enjoyable mobile experiences for your users.

1. jQuery Masonry

jQuery masonry is a plugin that will create grid layouts out of your page elements using jQuery. The plugin uses jQuery to arrange your items in a vertical grid, placing each item in the next consecutive open space. Define the width of the columns yourself, and the plugin pretty much takes care of the rest. 

For many developers, the hardest or most aggravating part of building a responsive, mobile friendly site is building a navigation that is equally as responsive and mobile friendly. Desktop users are accustomed to their navs being a long, horizontal line that links them to other sections of the site, but that type of design doesn't look great on mobile. The Responsive Nav plugin will easily solve all of your mobile navigation woes, as the plugin provides solutions not only for mobile navs, but for tablet navs as well. 

Sometimes when a webpage is viewed on a mobile device, certain elements have to get smaller to fit within the viewport. When elements get smaller, they don't always hold the same amount of content as they used to. The jQuery dot dot dot plugin is a free, lightweight way to handle this potential problem. The plugin can be used to add an ellipses (...) to any container whose content exceeds the size of the container.

Lazy Load is a plugin that can be used to improve load time of your mobile pages by only loading images that are in the viewport. This can really speed things up,  because the user won't have to wait for the images that aren't even in the viewport to load before the page loads.

Isotope is a cool, fun plugin that you can use to structure a dynamic, mobile-friendly page. This sort of dynamic structure is something that can't be achieved using CSS, and this plugin gives you a lot of options for how you'd like to display your elements in a mobile friendly way.

If you're implementing a slider functionality on a mobile project, it's a good idea to make sure that the slider is mobile-friendly and touch-enabled. The FlexSlider plugin helps you to easily create a slider that meets both of those requirements, complete with polished animations and widespread browser support.

ResponseJS is a lightweight plugin that aids in the creation of responsive sites by allowing you to easily swap blocks of code based on breakpoints, and it serves images progressively to improve page load time. 

6 Lightweight jQuery Plugins for Fixed Elements

Giving fixed positioning to elements is a great way to keep them visible on the page no matter how much or how far a user scrolls. Fixed positioning can be achieved easily using CSS -- it only takes one line of code to change the position of an element from static or relative to fixed. But if you're looking to create dynamic fixed elements, it's a little more complex and requires a bit of jQuery or JavaScript.

Dynamic fixed elements are elements that become fixed after the user has scrolled a certain amount down the page -- usually they become fixed once the user has scrolled past them. You can write code yourself to create dynamic fixed elements, but these type of fixed elements can be created easily using jQuery plugins. Check out the following lightweight jQuery plugins to see just how quickly and easily you can start adding fixed elements to your projects.

1. Sticky Kit

Sticky Kit is a great free and lightweight plugin that allows elements to become fixed or "stuck" to the page, no matter how far a user scrolls. With the plugin, you can easily make one or several different elements sticky, so it gives you a lot of options in terms of functionality.

Here's another plugin that allows you to make one or multiple HTML elements fixed. The plugin is lightweight, free, and easy to use. Additionally, it's supported on recent versions of most popular browsers. Plus, while it makes elements fixed when vertical scroll occurs, the elements are still able to move left to right if there's a horizontal scroll.

Headroom.js is a lightweight JavaScript plugin that makes it super easy for you to change the position of elements based on a user's scroll. The plugin has no dependencies so it's super lightweight and won't significantly slow down your page's performance.

Waypoints allows you to quickly and easily trigger a function when you scroll to a particular element. When the function changes the CSS position property to fixed or changes the CSS class to one with a fixed positioning, you're good togo.

This plugin is so lightweight and easy to use, it's like magic. Use it to add really cool effects to your scroll -- including fixed positioning.

6. Sticky

This simple plugin makes it easy to add fixed positioning to any element on scroll so that any of your elements will remain visible no matter how much far you scroll up or down. 

3 Ways to Use jQuery to Detect AdBlock

Ad blocking software is becoming increasingly prevalent among internet users, for a number of reasons. The most important of which is that, often times, ads can really decrease a user's experience. They can be obnoxious, and they can be slow -- and not just slow down your webpage, but also a user's entire browser or computer. Additionally, ad blocking software is now super easy for even the least technologically savvy users to get ahold of -- the Chrome extension for AdBlock makes it particularly easy to install.

For many casual web page browsers and internet users, this ad blocking software is great news. For website owners and operators, however, it's brutal. Because many websites rely on revenue from ads to keep running, ad blocking software can severely decrease the amount of money they're able to make from their website. With jQuery, it's actually possible to detect if a user is taking advantage of ad blocker software. Once the ad blocker is detected, you can choose to ask them to whitelist your site or even take it so far as to block them from your site until they've removed their ad blocker or whitelisted you.

What follows is a list of 3 ways that you can use jQuery to detect AdBlock software.

1. Detect AdBlock

Detect AdBlock is a website that offers real, easy to implement solutions to detect AdBlock software on your websites using JavaScript. The code is provided by AdBlock Analytics, who gives you step-by-step instructions on how to effectively detect whether or not your users are blocking your ads. Once the ad blockers are detected, Detect AdBlock gives you three options for how to proceed: you can send the data to Google Analytics, you can save and post the data to an external script, and/or you can display a custom message to your user. This is a great, easy solution for detecting ad blocking software. 

2. Code Synthesis Ad Blocker Detection Plugin

Code Synthesis' solution to detecting ad blocking software uses jQuery. The method of detection is to create a "dummy" ad container that, if installed, the ad blocking software will interpret as an ad and try to suppress. If this happens, then you know that your user is utilizing ad blocking software, and this particular code snippet gives you the option of displaying a custom message to your user(s). 

3. Adi.js

Adi.js is sort of a less hands-on approach compared to the other two ad blocking solutions we've already presented. That's because Adi.js is actually a plugin that you can install onto your projects, rather than code snippets that you have to insert yourself. Once you've installed the plugin, you only need to call any of the built-in functions to detect ad blocker software and execute a reaction to the software if it's found. This plugin is lightweight, super easy to install, and even easier to use. A great option for if you're trying to quickly add an ad blocking software detection functionality to your site or projects.