webdevstudios / hash-link-scroll-offset Goto Github PK

Offset the scroll position of anchored links. Handy if you have a sticky header that covers linked material.

JavaScript 49.58% PHP 50.42%

hash-link-scroll-offset's Introduction

=== Hash Link Scroll Offset ===
Contributors:      webdevstudios, pluginize
Donate link:       http://webdevstudios.com
Tags:
Requires at least: 5.5
Tested up to:      6.5.0
Stable tag:        0.3.0
License:           GPLv2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html

Offset the scroll position of anchored links. Handy if you have a sticky header that covers linked material.

== Description ==

Often anchor links can be overachievers and can scroll a user past the section intended. This plugin attempts to change that by offering a setting that allows you to change the scroll offset when clicking anchors. It also adds a nice animated scrolling effect when clicking an anchor rather than the sudden jump that usually occurs. Even handles when visiting a hashed URL directly.

Use the `no-scroll` class on any hash links that are not meant to scroll to an area of the page (Navigation for sliders, etc).

[Pluginize](https://pluginize.com/?utm_source=hash-link-scroll&utm_medium=text&utm_campaign=wporg) was launched in 2016 by [WebDevStudios](https://webdevstudios.com/) to promote, support, and house all of their [WordPress products](https://pluginize.com/shop/?utm_source=hash-link-scroll&utm_medium=text&utm_campaign=wporg). Pluginize is not only creating new products for WordPress all the time, but also provides [ongoing support and development for WordPress community favorites like CPTUI](https://wordpress.org/plugins/custom-post-type-ui/), [CMB2](https://wordpress.org/plugins/cmb2/), and more.

== Installation ==

= Manual Installation =

1. Upload the entire `/hash-link-scroll-offset` directory to the `/wp-content/plugins/` directory.
2. Activate Hash Link Scroll Offset through the 'Plugins' menu in WordPress.
3. Update the "Hash Link Scroll Offset" setting on the general settings page, **http://YOURSITE.COM/wp-admin/options-general.php**.

== Frequently Asked Questions ==


== Screenshots ==


== Changelog ==

= 0.3.0 =
* Updated: Removed jQuery dependency in our javascript
* Updated: Escaping and sanitizing of output.

= 0.2.2 =
* Confirmed compatibility with WordPress 6.4

= 0.2.1 =
* Confirmed compatibility with WordPress 6.3

= 0.2.0 =
* Misc changes
* Tested up to WordPress 5.9 *

= 0.1.8 =
* Adjust JS to account for relative urls.
* Add checks for evt and event.preventDefault existing.

= 0.1.7 =
* Refactor JS to be more extensible, and adjust auto-scrolling (when hash exists in URL) to be more intelligent.

= 0.1.6 =
* `'hash_link_scroll_offset.scroll_to'` jQuery event fired befor scrolling is initated. Also introduce useful properties, `scrollTo`, `initialScroll`, and `isScrolling`;

= 0.1.5 =
* `'hash_link_scroll_offset.complete'` jQuery event fired when scrolling complete.

= 0.1.4 =
* Fix "Cannot use a scalar value as an array" debug warning. ([Relevant Trac ticket](https://core.trac.wordpress.org/ticket/29722#comment:8))

= 0.1.3 =
* Prevent browser windows from moving/blinking on initial click of anchor link. Props [@ImBigWill](#9).

= 0.1.2 =
* Automatically compensate for admin bar. Props [@salcode](#5).

= 0.1.1 =
* Add `no-scroll` class exception. Props [@billerickson](https://github.com/billerickson)

= 0.1.0 =
* First release

== Upgrade Notice ==

= 0.2.0 =
* Misc changes
* Tested up to WordPress 5.9 *

= 0.1.8 =
* Adjust JS to account for relative urls.
* Add checks for evt and event.preventDefault existing.

= 0.1.7 =
* Refactor JS to be more extensible, and adjust auto-scrolling (when hash exists in URL) to be more intelligent.

= 0.1.6 =
* `'hash_link_scroll_offset.scroll_to'` jQuery event fired befor scrolling is initated. Also introduce useful properties, `scrollTo`, `initialScroll`, and `isScrolling`;

= 0.1.5 =
* `'hash_link_scroll_offset.complete'` jQuery event fired when scrolling complete.

= 0.1.4 =
* Fix "Cannot use a scalar value as an array" debug warning. ([Relevant Trac ticket](https://core.trac.wordpress.org/ticket/29722#comment:8))

= 0.1.3 =
* Prevent browser windows from moving/blinking on initial click of anchor link. Props [@ImBigWill](#9).

= 0.1.2 =
* Automatically compensate for admin bar. Props [@salcode](#5).

= 0.1.1 =
* Add `no-scroll` class exception. Props [@billerickson](https://github.com/billerickson)

= 0.1.0 =
First Release

hash-link-scroll-offset's People

Contributors

Stargazers

Watchers

Forkers

imbigwill phatsk mmcachran harshitm98 isabella232

hash-link-scroll-offset's Issues

Cache jQuery selector $('html, body')

If we create

app.$html_and_body = $('html, body');

we can then use it inside app.scrollToHash(),
which will eliminate jQuery finding the DOM elements each time.

Consider bumping version to 1.0.0

Since this plugin is being used in production environments, I think we should consider bumping the version to 1.0.0

If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backward compatibility, you should probably already be 1.0.0.

From How do I know when to release 1.0.0? on semver.org

Seems to work but it moves right after

http://www.coopilmandorlo.com/

This is the page I'm talking about. The plugin seems to work, clicking the anchor link it moves correctly 90px before the anchor, but right after scrolls automatically down to the anchor.

Could you help me with it?

Consideration: cross page scrolling work

Do we want to make this work with hashes on separate pages instead of just within the current page?

If you do decide to fix it this should do the trick on line 34:

if ( ! $( app.hash ) )

change to:

if ( ! $( app.hash ) || location.pathname.replace(/^\//,'') != this.pathname.replace(/^\//,'') )

Original request: https://wordpress.org/support/topic/breaks-between-pages-2/

Confirm implementation works w/ infinite-scroll

May want to implement a listener to 'post-load'.

Feature request: Allow media query settings for offset amount + more

Context of the problem: One of the commonest uses of this plugin will be to offset same-page hyperlink jumps due to a fixed menu bar at the top which needs to be compensated for, or else the anchored content will appear behind the fixed menu bar.

Because the fixed menu itself is often responsive, its height will vary (one-line menu bar becomes two lines for smaller screens), and therefore the hash link scroll offset will need to vary accordingly also.

Some websites also disable the fixed menu for mobile screens, and in that case, the hash link scroll offset should be disabled for mobile screens.

Suggested solution (manually determine offset conditions): Please add a feature which allows media queries to be added to vary the offset amount (px) according to screen width. It should be possible to add as many media queries as needed.

Extended solution (automatically determine offset conditions): Even better if you could allow users to link the offset value (px) to the height of fixed menu bar in question, by adding a plugin setting field in which users can specify the class or id of the <div> that represents the fixed menu. That way, the offset can be automatically determined by the height of the fixed menu.

Add support for GitHub Updater

I find GitHub Updater very helpful for some of the other GitHub only plugins I use regulary (e.g. GistPress).

It would be nice to have this plugin auto-update, as well.

Should output a console message when we preventDefault on a hash link for easier debugging

This plugin was interfering w/ some other functionality because it's now doing a preventDefault. We should at least spit something into the console

Add offset modification for presence of WP Admin Bar

The presence or absence of the WP Admin Bar causes a change in the size of the offset necessary.

It seems that ideally this should be handled in the JavaScript, where the presence or absence of the WP Admin Bar is detected and the offset modified.

The question is what does this offset modification look like.

Is the option set assumed to be with or without the WP Admin Bar?
Does it make sense to include two options (one for with and one for without the WP Admin Bar)?

Need class to disable for specific links

I'm using links to navigate a jQuery tabbed area ( screenshot: http://cl.ly/image/2X0h35271x3L ). When using this plugin, clicking on a tab moves the browser up so the tabbed area gets further and further.

I added a class of .no-scroll to those links, then made the following modification to the plugin's JS file which fixed it: https://www.diffchecker.com/8fcfj5vt

Handle Relative but Valid Paths

When the user is on a page, for instance /index.php, and an anchor should be valid with a path to the current page, e.g.

<a href="index.php#para2">Paragraph 2</a>

the anchor doesn't match the current selector.

IE8 and IE9 offset not applied when visiting hashed URL directly

When visiting a hashed URL directly in IE8 and IE9, the offset is not applied (i.e. the target of the #hash ends up at the top of the page, with no offset applied).

Notes:

this problem does not appear in IE10
clicking "Refresh" in IE8 or 9 browsers, causes the offset to be correctly applied