Page scroll to id

描述

Page scroll to id is a fully featured plugin which replaces browser’s “jumping” behavior with a smooth scrolling animation, when links with href value containing # are clicked. It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like:

  • Adjustable scrolling animation duration and easing (over 30 easing types)
  • Link and target highlighting via ready-to-use CSS classes
  • Vertical and/or horizontal scrolling
  • Scrolling from/to different pages (scrolling to target id on page load)
  • Offset scrolling by pixels or element selector with custom expressions
  • Insert link and target id buttons in post visual editor
  • Link-specific offset, scrolling duration, highlight target etc.

Demo (default animation duration/easing, link highlighting etc.)

Plugin resources, links and tutorials

Requirements

Page scroll to id requires WordPress version 3.3 or higher (jQuery version 1.7.0 or higher) and your theme must (and should) have wp_head() and wp_footer() functions. In some Microsoft Windows based web servers some plugins might produce an error 500 (depends on server/PHP configuration). To pinpoint the issue enable debugging in wp-config.php and check wp-content/debug.log file for relevant errors.

Quick usage and tips

  1. Install the plugin.
  2. The plugin is enabled by default on your WordPress Menu links, so you can start adding custom links and set their URL to the id/target you want to scroll to.
  3. Create id targets within your content using plugin’s “Insert Page scroll to id target” button and/or shortcode (see contextual “Help” menu in plugin settings page) in post visual/text editor. Create targets in widgets areas using “Page scroll to id target” widget.
  4. Create links within your content using plugin’s “Insert/edit Page scroll to id link” button and/or shortcode in post visual/text editor. You can also add the class ps2id on any existing link you want to be handled by the plugin.

For more info see plugin’s basic tutorial

License

MIT

You should have received a copy of the MIT License along with this program.
If not, see http://opensource.org/licenses/MIT.

Donate

If you like this plugin and find it useful, consider making a donation :).

Plugin previous/other versions

http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-versions

Other/external resources

畫面截圖

  • "Page scoll to id" settings

  • "Page scoll to id" settings help

  • Multiple selectors in plugin settings

  • "Page scoll to id" target widget and widget id values

  • Visual editor "Insert/edit Page scoll to id link" modal

  • Visual editor "Insert Page scoll to id target" modal

Installation

Automatic

  1. Click ‘Add New’ under ‘Plugins’ menu in WordPress.
  2. Perform a search for the term ‘Page scroll to id’ and in search results, click ‘Install/Install Now’ under plugin name.
  3. When installation is finished, click ‘Activate Plugin’.

Manual

  1. Download and extract the plugin.
  2. Upload the entire page-scroll-to-id folder to /wp-content/plugins/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.

Configuration

Configure plugin options by clicking ‘Settings’ under plugin name or through the ‘Settings’ menu in WordPress administration.

常見問題

Please visit plugin’s Knowledge Base – FAQ for up-to-date info and guides.

Installation Instructions

Automatic

  1. Click ‘Add New’ under ‘Plugins’ menu in WordPress.
  2. Perform a search for the term ‘Page scroll to id’ and in search results, click ‘Install/Install Now’ under plugin name.
  3. When installation is finished, click ‘Activate Plugin’.

Manual

  1. Download and extract the plugin.
  2. Upload the entire page-scroll-to-id folder to /wp-content/plugins/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.

Configuration

Configure plugin options by clicking ‘Settings’ under plugin name or through the ‘Settings’ menu in WordPress administration.

Reviews

Great plugin, great service

Plugin works like a charm. Mahlihu also responded fast to a technical question I had and provided a solution – what else can you whish for?

Thanks @malihu for the effort!

Great plugin, great support

This is a great plugin that does what it says and more. Accessible to everyone and very customizable (if you have CSS knowledge).
The support is fast and great also. 🙂

Beautiful plugin

Beautiful plugin and excellent cooperation with Page Builder Plugin Visual Composer (WPBakery).

閱讀全部 121 評論

貢獻者與開發者

“Page scroll to id” is open source software. The following people have contributed to this plugin.

貢獻者

“Page scroll to id” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Page scroll to id” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.2

  • Changed default options for scroll duration and easing type. Plugin is now enabled by default on WordPress menu items/links. These changes affect only first-time installations (upgrading won’t change these options).
  • Extended plugin’s settings page and renamed few options to less technical terms.
  • Added special class/option for creating links with alternative scroll duration/speed.
  • Extended plugin buttons on WordPress visual editor (non-shortcode links, custom classes etc.).
  • Added new option ‘Append the clicked link’s hash value to browser’s URL/address bar’.
  • Added new option ‘Stop page scrolling on mouse-wheel or touch-swipe’.
  • Added new option ‘Prevent other scripts from handling plugin’s links’.
  • Added new option ‘Normalize anchor-point targets’.
  • Relative-root links are now properly highlighted.
  • Added wp-config.php option for selecting which script files the plugin loads (minified or uncompressed).
  • Only necessary CDATA values are passed on the front-end script.
  • Added compatibility for latest non-WordPress jQuery versions (2.x and 3.x).
  • Fixed a bug regarding shortcode’s offset attribute when used with “auto” layout.
  • Fixed a php notice when updating plugin from version 1.6.0.
  • Added workaround for IE/Edge not starting from the top when scrolling to hash on page load.
  • Updated readme.txt, contextual help and documentation.

1.6.1

  • Added additional default selectors: .ps2id > a[href*='#'],a.ps2id[href*='#'].
  • Added “Page scroll to id target” widget.
  • Added custom buttons in WordPress visual editor for plugin’s shortcodes insertion.
  • Added new option ‘Enable on WordPress Menu links’ in plugin settings.
  • Fixed browser’s history back button when ‘Scroll to location hash’ option is enabled.
  • Updated readme.txt.
  • Extended help and documentation.

1.6.0

  • Fixed contextual help shortcut links in plugin settings page.
  • Added new option ‘Enable for all targets’ for ‘Scroll to location hash’.
  • Added new option ‘Delay’ for ‘Scroll to location hash’.
  • Fixed an issue regarding invalid selectors with location hash.
  • Updated readme.txt.
  • Updated help.

1.5.9

  • Extended ps2id shortcode for creating div elements (in addition to anchors).
  • Added ps2id_wrap shortcode for creating target wrappers in content editor.
  • Extended offset selector expressions with :position, :height() and :width().
  • Updated readme.txt.
  • Updated help.

1.5.8

  • Fixed various PHP notices in debug mode.
  • Minor script optimizations.

1.5.7

  • Added ‘Highlight by next target’ option. When enabled, highlight elements according to their target and next target position (useful when targets have zero dimensions).
  • Extended ps2id shortcode for creating targets in content editor.

1.5.6

  • Changed the way ‘Force single highlight’ option works. When enabled, it now highlights the first highlighted element instead of last.
  • Extended highlight and target classes with additional ones in order to differentiate the first and last elements. You can now use .mPS2id-highlight-first, .mPS2id-highlight-last, .mPS2id-target-first and .mPS2id-target-last in order to target the first and last highlighted links and targets in your CSS.
  • Added ‘Keep highlight until next’ option. When enabled, the plugin will keep the current link/target highlighted until the next one comes into view (one element always stays highlighted).
  • Added ‘Disable plugin below screen-size’ option. Set the screen-size (in pixels), below which the plugin will be disabled.

1.5.5

  • Fixed contextual help links in plugin settings page.
  • Updated Offset field to accept comma separated values for defining different offsets for vertical and horizontal layout (e.g. 100,50).
  • Added ‘Scroll to location hash’ option. When enabled, the plugin will scroll to target id (e.g. <div id="id" />) based on location hash (e.g. mysite.com/mypage#id) on page load.
  • Updated readme.txt.
  • Updated help.

1.5.4

  • Fixed a minor bug in jquery.malihu.PageScroll2id-init.js.
  • Updated screenshots.
  • Updated readme.txt.

1.5.3

  • Extended Offset option to accept element selectors in addition to fixed pixels values.
  • Added ps2id shortcode for creating links in content editor.
  • Added the ability to define link specific offsets via the html data attribute: data-ps2id-offset.
  • Fixed some minor issues for WordPress versions lower than 3.5.
  • Updated help and external links.
  • Changed plugin license from LGPL to MIT.

1.5.2

  • Minor code tweaks.

1.5.1

  • Minor code tweaks.
  • Minified scripts.

1.5.0

  • Dropped jQuery UI dependency (jQuery UI is no longer required for the plugin to work).
  • Fixed the bug of non-working links to other pages. The script now checks if href values refer to the parent document, before preventing the default behavior.
  • Fixed the bug regarding selectors referencing body class not working.
  • Any link handled by the plugin with href value #top will now scroll the page to top, if no element with id top exists.
  • Added links highlighting feature. The script adds a class (default: mPS2id-highlight) automatically on links whose target elements are considered to be within the viewport.
  • Plugin adds a class (default: mPS2id-target) automatically on targets that are considered to be within the viewport.
  • Plugin adds a class (default: mPS2id-clicked) automatically on the link that has been clicked.
  • Added offset option: Offsets scroll-to position by x amount of pixels (positive or negative).
  • The plugin script now fully validates href values and ids before scrolling the page.
  • Fixed varius minor bugs.
  • Code rewritten and optimized for better performance and maintenance.
  • For more see Plugin changelog.

1.2.0

  • Added support for jQuery version 1.9.

1.1.0

  • Removed the hard-coded plugin directory URL in order to fix errors of pointing .js files to a wrong location.

1.0.0

  • Launch!