Easy Smooth Scroll Links WordPress Plugin

You might be interested in my other plugins

Easy Smooth Scroll Links WordPress Plugin creates page anchors and add smooth scrolling effect (you can also choose other scrolling animation effects) to links linking to page anchors. You can set scroll speed and offset value. Works on IE, Firefox, Chrome, Safari… You can also enable a simple yet elegent GoToTop button.

Basics

The HTML of an anchor is something like this :

<a name="anchorname"></a>

By inserting an anchor to a certain part of the page, we are setting up an address for this section, it gets an address like this :

URLOfThisPage#anchorname

For example,

http://www.jeriffcheng.com/wordpress-plugins/easy-smooth-scroll-link#download

Menu

  1. Screenshots
  2. Features
  3. Download
  4. FAQs

Screenshots

For more screenshots, go to http://wordpress.org/plugins/easy-smooth-scroll-links/screenshots/

Easy Smooth Scroll Links V1.5

Features

1. Setting Up Anchors

Set up an anchor for a section, and then link to this section on the same page with #anchorname

Setting Up Anchors

Note: You can also use shortcode anchor shortcodeto insert anchors, in case the button doesn’t show up in Visual Editor.

2. Anchor Scrolling Settings

You can set scroll speed and offset value. Choose from 30 Scrolling Animation Effects

Offset means: there could be a distance between the destination of scrolling and the anchor. (By default, the destination is exactly where the anchor is.)

Easy Smooth Scroll Links WordPress Plugin Anchor Scrolling Settings

3. Disabling Scrolling to Some Anchors

This plugin works by judging whether the hyperlink begins with #

If you link TEXT with #apple, then this plugin will take you to anchor with the name apple. This can sometimes cause problems, especially more and more complex onpage modules are using # within their structure, like Tab module, Accordion module.

Thus, I designed this function allowing you to disable scrolling to some anchors.

disable scrolling to some anchors

a). Disabling Scrolling to Anchors with the same prefix

By default, I have excluded anchors links beginning with #tab   #quicktab   #pane these 3 are the most used prefix for Tab plugins/modules. like the Woocommerece plugin.

Exclude Smooth Scroll from Woocommerce Tabs
Woocommerce Tabs, begin with #tab

b). Disabling Scrolling to Individual Anchors

Take my blog widget as an example,

Exclude Smooth Scroll from Anchors Exactly Match

I can exclude them with prefix #bl , which is recommended.

Exclude Anchors Beginning With

I can also exclude them one by one, but it’s not so smart, as you can type less words with method 1

Exclude Anchors Exactly Match

4. Enabling GoToTop Button

Since this plugin can apply lots of scrolling effects to anchor links, I added a bonus: a simple yet elegent GoToTop button, you can now get rid of those heavy, buggy gototop button wordpress plugins. Cheers !

What’s more, you can set speed and animation effect for this GoToTop button, these won’t affect the above anchor link settings.

GoToTop button

GoToTop button

Download

Current Version

FAQs

1. It doesn’t work !

It should work on all major browsers and all modern wordpress themes. If it doesn’t, check the footer.php file in your theme folder.

wp_footer

There should be

<?php wp_footer(); ?>

before the end of

</body>

If not, add this line yourself. :) The plugin relies on this line of code to work…

If it still doesn’t work, check if you’re using JS minify plugins like “WP Minify“, you should exclude inline scripts and

//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

from combining or minification.

2. I can’t see Anchor Button in CKEditor?

CKEditor For WordPress has its own Anchor Button:

CKEditor For WordPress Anchor Button

3. I want to know about about the animation effects.

They are actually Easing functions, read more : http://easings.net/

30 Scrolling Animation Effects

4. How can I link back to the menu like your   ?

Just place an anchor on the menu and link the ↑ symbol to the menu.

Checkout this amazing tool for spacial HTML characters.  http://copypastecharacter.com/

Video: Video Tutorial - Easy Smooth Scroll Links WordPress Plugin

Easy Smooth Scroll Links WordPress plugin. * You can set scroll speed and offset value. * Choose from 30 Scrolling Animation Effects * Works on all major browsers: IE, Firefox, Chrome, Safari...