Page scroll to id for WordPress tutorial
Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.
- Creating id targets
- Creating links
- Links highlighting
- Offset scrolling for sticky menus
- Scrolling from/to different pages
- Video tutorial
In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:
- Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
- Create links that point to those targets or enable the plugin on links that already exist in your site.
Creating id targets
Creating id targets in post block editor (Gutenberg)
You can create your targets in more than one ways in the block editor, e.g. using the group block, the “Page scroll to id target” block, the shortcode block, block class attribute, HTML anchor field etc.
Create id targets using the group block
Click on the “Add block” icon and select “Group”. This will insert a general container block that can group other blocks and we can add the id
on this group/general container block.
On the group block properties (right panel) you can add the id you want in the “HTML Anchor” field.
Create id targets using the “HTML Anchor” field
If you use headings in your content, you can use the “HTML Anchor” attribute of blocks to set a target id. Select your block, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field.
Create id targets using plugin’s “Page scroll to id target” block
The plugin has its own custom block for inserting targets: “Page scroll to id target”
Create id targets using “Additional CSS Class(es)” field
You can generate id targets for any block element, by setting its class name to: ps2id-id-yourid
, changing the yourid
part to the id value you want.
Click on a block element (e.g. a paragraph), click “Advanced” in the right panel and set the target id you want in the “Additional CSS Class” in the form of:
ps2id-id-
plus the id you want.
For example, if you want to create the target id “last-section”, give the element the CSS class:
ps2id-id-last-section
.
Create id targets using the shortcode block
You can use plugin’s shortcodes in the block editor. Click on the “Add block” icon and select “Shortcode”.
Add the [ps2id id='section-1'/]
in the shortcode field to create a target with id section-1
.
You can also use the [ps2id_wrap]
shortcode accordingly.
Creating id targets in post visual editor (classic “old” editor)
In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor.
In “Page scroll to id target” modal insert the id value you want (e.g. some-id
) and click “OK”. The target shortcode (e.g. [ps2id id='some-id' target=''/]
) will appear in the editor. Update/save the post/page. You can now use this id value in your link(s) URL (e.g. #some-id
).
Creating id targets in post editor via shortcodes
In post visual or text editor, enter [ps2id id='some-id'/]
in the place you want to create the target and set the id
attribute to the value you want. This will create a simple anchor-point target. If you want to wrap your content (or part of your content) in a target id (same as adding an id attribute to some content), use the [ps2id_wrap]
shortcode:
[ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
Update/save the post/page so you can use this target value in your link(s) URL (e.g. #some-id
).
Click here for more info on target shortcodes
Creating id targets in HTML
Wrap your content in a div with an id attribute (recommended for better link highlighting) or add simple anchor points (with id attributes) before each content section. Examples:
<div id="section-1"> <p>Section 1 content...</p> </div> <div id="section-2"> <p>Section 2 content...</p> </div> <div id="section-3"> <p>Section 3 content...</p> </div>
<a id="section-1"></a> <p>Section 1 content...</p> <a id="section-2"></a> <p>Section 2 content...</p> <a id="section-3"></a> <p>Section 3 content...</p>
Creating id targets in WordPress widget areas
Create targets in your widget areas (Appearance → Widgets) via plugin’s “Page scroll to id target” widget.
Keep in mind that all WordPress widgets have existing id values that you can use with your links. You can find these id values within each active widget under “Page scroll to id target” label. The option to display these values is “Display widgets id attribute” which is enabled by default.
FAQ
Creating links
Creating links in WordPress Menus
Edit your menu and add “Custom links” as these type of links allow us to enter a custom URL with the id we want. Your links URL should be in the form of #some-id
, http://my-site.com/page/#some-id
, /page/#some-id
etc.
Please note that if you want your links to work from other/different pages, you’ll need to insert the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id
) or the relative-root URL (e.g. /page/#some-id
).
Creating links in post block editor (Gutenberg)
You can use plugin’s shortcodes in the block editor. Add the shortcode: [ps2id url='#some-id']link text[/ps2id]
inside any block element to create a link that points to the “some-id” target.
Keep in mind that since “Page scroll to id” version 1.6.3, the plugin is enabled by default on all links with a non-empty hash value (e.g. #some-id
) in their URL. This means that you don’t have to use plugin’s shortcode to create links, as any link you create via the WordPress editor will work.
Creating links in post visual editor (classic editor)
In post visual editor, click the toolbar button “Insert/edit Page scroll to id link” to create a link at the cursor position in the editor or from text you’ve already selected.
#some-id
, http://my-site.com/page/#some-id
, /page/#some-id
etc. When ready, click “OK” and the link will appear in the editor. You can edit the link via both “Insert/edit link” and “Insert/edit Page scroll to id link” buttons, as well as inline.
“Page scroll to id link” modal provides additional options like “Offset” and “Custom class(es)” that can be used to change link’s offset, its scroll duration/speed etc.
Creating links in post editor via shortcodes
In post visual or text editor, enter [ps2id url='#some-id']link text[/ps2id]
in the place you want to create the link and set the url
attribute and link’s text to the values you want. The shortcode provides the same options as plugin’s “Insert/edit Page scroll to id link” toolbar button via attributes.
Creating links manually
Any link with ps2id
class or m_PageScroll2id
rel attribute value will be handled by the plugin. For example:
<a href="#some-id" class="ps2id">link text</a> <a href="#another-id" rel="m_PageScroll2id">link text</a>
Enabling the plugin on links that already exist in your site
You can instruct “Page scroll to id” to handle any link in your page(s) by using the “Selector(s)” field in plugin settings.
If you need to enable “Page scroll to id” on all links with URL containing a hash (#
), insert the following value in “Selector(s)” field:
a[href*=#]:not([href=#])
Click here for more info on “Selector(s)”
FAQ
- How do I make my links work from any page in my site?
- Can I have links with different offsets?
- How to make the plugin work with WordPress Menu links?
- Can I have links with different scroll duration/speed?
Links highlighting
Each time a target element is visible on the screen (i.e. is within the viewport), the plugin adds the mPS2id-highlight
class to its associated link or links (i.e. the links that scroll to this target). You can use this class in your theme’s stylesheet or custom CSS to style the current/active link(s), e.g.
a.mPS2id-highlight{ background: #ff0; }
Common case scenario and example
Lets say you have a sticky menu containing links that scroll to various targets/sections within the page. Your links text color is black (which may be set by your theme or some other stylesheet):
.memu-item a{ color: black; }
When scrolling through page sections (i.e. targets) you want the link of the visible/current target to become red. You can do this by adding the following CSS:
.memu-item a.mPS2id-highlight{ color: red; }
Notes and more info
The default highlight classes for the links are: mPS2id-highlight
, mPS2id-highlight-first
and mPS2id-highlight-last
(you can change these class-names in plugin’s settings if you want).
For more information about the highlight classes and options see “Classes & highlight options”, “Highlight selector(s)” and FAQ below.
FAQ
- How do I make my links stay highlighted for longer distance while scrolling?
- Multiple links get highlighted! How to highlight only one?
Offset scrolling for sticky menus
If your page has a top sticky/fixed-positioned menu, you’ll probably need to use plugin’s “Offset” option in order to prevent the menu from overlapping your content. This option allows us to shift (i.e. offset) scrolling, so in the case of a top sticky menu, we usually need to “stop” scrolling a few pixels before the target reaches the top of the page (to accommodate for the space the sticky menu occupies).
Go to Settings → Page scroll to id → Offset and insert an offset amount equal to your sticky menu height (in pixels). You can insert its height value as a number (e.g. 100
) or you can insert your menu selector (e.g. #my-sticky-menu
), so the plugin calculates its height automatically.
The plugin provides special selector expressions in order to define advanced offsets and work with responsive menus. For more info see “Offset” option.
Scrolling from/to different pages
The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded.
The only thing you’ll need is to make sure your links have the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id
).
Hi malihu,
I regret having to ask this, because I suspect the answer is something ridiculously simple. But I just can’t get the plug-in to work. I’m using a Divi theme with WordPress, and my custom links work just fine. However, I’m not getting the animations, offset, or highlighting from the plug-in. It seems to be installed properly, and I can see the HTML code generated by it. I’ve tried using the standard selectors and also created custom selectors, but nothing seems to get it to work. My guess was that the JS was being overridden somehow, although I have deleted all other plug-ins and have almost no custom coding (it’s a very simple site). Any clues?
Hello Alan,
You are correct. The JS is indeed overridden by this script:
...themes/Divi/js/custom.js
This means that your links are handled by the script above which prevents “Page scroll to id” from working (along with most of its functions, like offset).
The function in the custom.js which does this, is from line 746 to 770.
Check if there’s an option in the theme to disable this “smooth scroll” functionality or remove/comment-out these lines of code manually. Doing this, everything should work.
Let me know
Sorry for the late reply. I was looking for this post in the wrong comments section. : ) Anyway, yes, both your solution and the plug-in are working great! Thanks very much!
Simple question (I hope). I am trying to get the “FIND A CHURCH” red button, to scroll down to the “CHURCHES” section when pressed. I downloaded the Page scoll to ID plugin thinking it would be easy….HA HA. I need help! Thanks!
Hi,
Your link’s URL currently points to
#latestnews-id
but there’s no target element with such id (latestnews-id
).You either need to create the target element (see Creating the target sections section) or change you link’s URL to an existing id within your document.
I inspected your page via browser’s developer tools and it seems that the section you want to scroll to has already the id
latestnews-id
, so you can simply change the “Find a church” link URL tohttp://www.repentbelize.com/#team
.You should also enable the plugin on your “Find a church” link. You can do this by giving it the class
ps2id
. If you can’t give a class to your links, you can easily enable it by adding its selector in “Selector(s)” field in plugin settings:Go to “Page scroll to id” settings, change the “Selector(s)” field value to:
a[rel='m_PageScroll2id'], a.btn[href*='#']
and hit “Save Changes”.
FYI:
Your theme seems to have an internal mechanism for scrolling same page links, so if for some reason you need to disable it, you have to remove the function in line 162 of
...themes/zerif-lite/js/zerif.js
.THANK YOU!
THANK YOU!
THANK YOU!
You’re welcome!
Another question, how do I remove the “This site is under development” statement that shows when site is shared with others?
THANKS!
Happy Thanksgiving!
I can’t really say but you may need to re-configure your site server as it says “connection not secure” when trying to access it. This happens because your site is using
https
and there must be an issue with the certificate. You should contact your web hosting support and/or site developer.Hi, I’m trying to figure out why the page jumps on my top nav items, whereas the footer nav items work fine. Can you please help?
Please take a look at my site at: https://showart.gooddogpress.com/
Thank you!
Hello,
Just checked your page and there’s another script which handles your menu links.
The script is in index on line 577:
jQuery( document ).ready( function( $ ){ if ( $( window ).width() >= 767 ){ $( '.navbar-nav > li.menu-item > a' ).click( function(){ if( $( this ).attr('target') !== '_blank' ){ window.location = $( this ).attr( 'href' ); }else{ var win = window.open($( this ).attr( 'href' ), '_blank'); win.focus(); } }); } });
I don’t know if this is added by the theme or some other plugin and I’m not sure why it’s added. As you can see, the code applies when viewport width is grater than 768 pixels, that’s why the menu links scroll the page smoothly on mobile menu.
I can’t really see a reason for the script as it seems to do what HTML links do natively.
If you remove (or comment-out) the script above, your menu links will smoothly scroll the page as they’ll be handled by “Page scroll to id”.
Hope this helps
Thanks so much! I had to dig a little into my parent theme file, but I was able to remove that offending jQuery (from Bootstrap on Colorlib’s Sparkling theme) by adding this to my functions.php:
function child_remove_parent_function() { remove_action( 'wp_footer', 'sparkling_make_top_level_menu_clickable', 1); } add_action( 'wp_loaded', 'child_remove_parent_function' );
Nice. You applied the proper/best solution π
Hi there, I’m not getting it to work. I have an icon pointing down and I need it to scroll to a section beneath it. Please help.
This is the site: http://www.ikydstudio.com/DavidStoltzB
-Ariel
Hi,
I’m not sure how to help. You don’t have the plugin installed/activated on your site(?)
Hey, Malihu
I’m not much of a programmer, but I really love your plugin. I’ve gotten it to work with a few menus, but I want to get it to work for a contact form.
And when I click on a menu, it scrolls past the title, and I can’t get it to offset.
Can you help me, please?
Hi,
If you change your “contact us” menu link URL to
#contact-us
it seems to scroll to the correct position(?)Also, your theme has another script which handles page scrolling. The function is in scripts.js on line 20. This function is called in line 131 of the same file, so if you comment/remove it, your links should be handled by “Page scroll to id”.
Hope this helps
How do I remove that line, please? Do I use dreamweaver, or WordPress code editor?
Whichever you want. You could use wp editor (Appearance > Editor) within wp admin or a code editor (like dreamweaver) via FTP.
Hey, I think this plugin is great!
I have it installed, and i’m using a theme that I didn’t make. I’m using your plugin on content in the page to link to somewhere else on the same page instead of having the link in the menu.
It jumps instead of slowly scrolls, and i’m not quite sure what to do?
Does this plugin work on other links that aren’t in the menu?
This is my first time handling all this css and html so it’s a bit daunting.
Site: http://nvergara.com/games
Thanks!
Hello,
The plugin works on any link. You just need to enable the plugin on your links. You can do this in many ways. For example, by giving your links the class
ps2id
If you cannot modify your link(s), you can add their selector in plugin settings.
In “Page scroll to id” settings, change the ‘Selector(s)’ option to:
a[rel='m_PageScroll2id'], .sow-image-container a[href*='#']
This plugin look like it will do everything I need. I have installed as instructed for custom menu, but nothing works. Any help would be welcomed.
I just checked you site and everything works except that scrolling animation is handled by the theme.
Your theme has an internal way of scrolling the page. The function that does this is in line 3259 of
...themes/converio/js/scripts.js
(commented as// smooth scrolling
).If you remove/comment this click function (from line 3259 to 3270), page scrolling will be handled correctly by “Page scroll to id”.
I also noted that you’ve set the offset to
800
pixels. Not sure why you want that, since your header menu is not fixed/sticky(?)Thanks for the quick response, I will give your comments ago.
Regarding the 800 pixels – I was playing around with the plugin and forgot to change this.
Many thanks
Hi,
You helped me a couple of weeks ago with my site: fellowships.davidsuzuki.org
They have now asked for a fixed header and with that implemented – I’ve put the class of the header in the offset (id didn’t work). The scroll lands almost at the right spot on the first click and then if I click a second time, it lands exactly where it should. Is there something I can do to fine tune it so it lands where it should on the first click?
Also, I’ve put .site-header-main:fixed into the offset, the it’s still doing it for mobile (even though that’s only set for media queries above 800px wide). Does the :fixed only work for ids?
Thanks for any help!
Krisztina.
Hello again,
I’ll try to explain as best as I can π
The issue you’re having is because a)the page length changes after each accordion is opened or closed and b)because accordions have their own scrolling animation (e.g. when you click one accordion panel, it opens and scrolls the page).
For example:
When you click the link “Fellowships”, the page scrolls at the “correct” position because it is the first accordion.
When you click the link “Eligibility”, the page scrolls at the “correct” position only after the second click, because “Fellowships” closed while “Eligibility” opened, changing the page length as well as the actual position of “Eligibility”.
This is because elements position is always calculated from the top of the page to the element’s top. “Fellowships” is before “Eligibility”, so when the former is closed it changes the latter position.
The animation that happens after an accordion is opened, is part of the accordion script/plugin and is handled entirely by it (not “Page scroll to id”).
“Page scroll to id” handles your menu links (not the accordion panels), so the options you’ve set (e.g. offset) apply only on those links it handles. For example, if you click a link that’s not an accordion, like “About”, the page scrolls exactly where it should with the correct offset.
The offset cannot apply on the scrolling that happens after an accordion is opened (the accordion script has its own fixed offset as far as I can see).
So because accordion’s offset is not the same with “Page scroll to id” offset, when you click the menu link a second time it re-adjusts the scrolling position according to “Page scroll to id” offset you’ve set.
In any case, the only fix I can see is re-adjusting scrolling position after accordion has done its scrolling but I can’t say for sure if it’ll work as we want…
In the custom script we added previously, add the following additional code after:
$("#panels .ttfmp-accordion-container").accordion("option","active",active);
Additional code:
setTimeout(function(){ $.mPageScroll2id("scrollTo",href); },500);
and increase/decrease the
500
value accordingly.Sorry for the long post but the issue is a bit technical.
Also, the
:fixed
value in the offset does work as it should on the non-accordion links (e.g. “About”). On the accordion links (on mobile), any extra space you see above the accordion title, it’s the accordion’s script fixed offset.One final note:
I would be great if in the accordion script you could change its (fixed) offset to match the one from “Page scroll to id”. Maybe there is an option for this?
Hello, thank you for this wonderful plugin! Unfortunately I can’t seem to get it to work. I have a single page site with several content sections and have tried adding the scroll to id link/target into my section descriptions but nothing happens when the link in the menu is clicked. Anything I’m doing wrong?
Thanks in advance.
Hello,
You’ve accidentally added the hash (#) in your targets id value.
For example, “Beat Catalog” section id is currently
#beat-catalog
while it should bebeat-catalog
.Also, you don’t have a
home
target for your “Home” link. You should create one or use an existing id in your template (e.g.#top-bar
).Let me know if this helps
That helped! Thank you for the speedy response and support.
Just a couple more things that I’m not sure about, I have a pricing table with “Buy Now” buttons. Clicking those makes it snap to the section rather than scroll. Also, is there a way to make it scroll to the section title rather than the space right below it?
1. βBuy Nowβ buttons
You need to enable the plugin on those links and you can do this in more than one ways. For instance, if you give the links the class
ps2id
, it’ll work.If you cannot add classes to those links, you can add their element selector in “Selector(s)” field in plugin’s settings:
a[rel='m_PageScroll2id'], .pricing-table-button .button[href*='#']
2. Scroll to the section title
You can use plugin’s “Offset” option to offset scrolling position according to your titles height. So, in plugin’s settings set “Offset” value to
108
(your titles height) or any value you want.Another way would be to use the id attributes of existing elements within your theme. Your theme already wraps each section in elements with id in the form of
content-sectionX
and those sections include the titles. So you can try changing your links URL from:#beat-catalog
,#licensing
etc. to:#content-section2
,#content-section3
etc.Hope this helps
Thanks a lot for the donation π
Awesome! Thank again, I don’t get this kind of support even for paid products π
As for the donation, you are very welcome and it is more than well deserved.
Awesome plugin.
I have one question, i am using it on a one page site for a client. When you click on the menu item and it scrolls down to the targeted area, they want the url in the browser menu bar to change to reflect the target.
For example: one of the targets is #doors, they want the url in the browser to show http://www.xxxxx.xx.xx/#doors and not the page url.
Is this possible?
It is possible if you can add an extra js script in your theme/template. If you can, try the following:
(function($){ $(window).load(function(){ $(document).data("mPS2id").onStart=function(){ if(window.history && window.history.pushState) history.pushState("","",$(".mPS2id-clicked").attr("href")); } }); })(jQuery);
Add the above in a script tag in your footer.php just before the closing body tag or inside a custom javascript field if your theme provides one.
Let me know π
I t seems I am too dumb even for such an extensive tutorial. I want to connect the portfolio item “www.name.com/portfolio/dumb” to another portfolio item “www.name.com/portfolio/smart”.
I create an individual link, give it the dumb URL, I go to βScreen Optionsβ and check βLink Relationship (XFN)β, then I copy “m_PageScroll2id” into the XFN field of the individual Link I created. Am I on track still.
Now I want to add “Smart” to the menu and I get lost. I add it and copy “m_PageScroll2id” into the field – NOTHING – I create a new individual link, give it the smart URL and of course the “m_PageScroll2id” – NADA – Then I go to your chapter “Creating the target sections” and I say -F… THAT – I am too dumb for that.
Can you please make me feel smart again. Thank you, Goso
When you say “connect the portfolio item x to another portfolio item…” what do you mean?
The plugin connects links with URL in the form of
#id
to sections with this particular id.The plugin does not create single-page websites or modify themes/templates. It’s just connects links with (pre-existing) content sections and helps creating them via editor buttons, shortcodes etc.
The example links you posted (e.g.
www.name.com/portfolio/dumb
) are pages and do not have a hash (#).The way it should normally work is creating a link with URL
http://www.name.com/portfolio/dumb#section-1
and in thehttp://www.name.com/portfolio/dumb
page create a target with idsection-1
. This way, when a user clicks on the link, it’ll scroll thehttp://www.name.com/portfolio/dumb
page to thesection-1
position.Does this help?
Hello Malihu, thanks for this awesome explanation on the plugin !
I installed it not for the page scrolling feature but only to achieve the highlight active links on scroll. Unfortunately I’m having a hard time on it. I can’t send you the website link because it’s on localhost at the moment but I can show you a screenshot of my sidebar code: http://imgur.com/a/6qLAA
As you can see I have 2 id’s, #sidebar and #nav_menu-2. I tried to change the CSS on both but nothing works.
#nav_menu-2 a.mPS2id-highlight {
background: #3b3b3b !important;
}
That ID works because if I take off the .mPS2id-highlight sufix it colors all the links.
Thank you
Hello,
Is there an element with id
feature1
in your content?The thing is that the plugin highlights only the links that it handles, so it must be activated on your link(s). If there’s a target with the appropriate id in your content, then it should work.
To remove the click event from the link and not use the page scrolling feature at all, you’ll need an extra small js script (I can give you one). But first you need to make sure that the plugin works as it should (setup the targets etc.)
Let me know
Hi and thank you for answering.
I’m using Themify Ultra plugin by the way.
The element , “feature1”, is the second row of my page http://imgur.com/a/ClvI1.
I have a single page with multiple rows. Each link in the sidebar sends me to the respective row.
What scares me a bit is that even the “#nav_menu-2 a:active” method doesn’t work properly. It should set and keep a pre defined color on the link when I click on it and it only sets that color on the click “time frame second”. The it goes back to the default color instead of keeping it.
I’m giving this additional info (that doesn’t include the on scroll issue) because it could be possible to have some conflicts about this “anchor pages”.
Well, you need to make sure (via browser’s dev tools) if the target elements have id attributes. There’s a chance that they use the name attribute instead of the id and the plugin won’t work with it.
You should also check if the scrollable element (i.e. the element with the scrollbar) is the page itself (html/body tag) or an overflowed div.
If the scrollable element is the actual page and the target elements work with id (and not name) attributes, the plugin should work.
the module is inside of a div
https://puu.sh/rGsqm/583ffb604c.png
I can’t see an ID on the module row, but the module feature has one called “feature-32-1-0-1”
Well then this id is the one you want to associate your link to (e.g. change your link’s URL/href to
#feature-32-1-0-1
Yea that works. The link must be the content id instead of the anchor page name. Thank you very much for your help Malihu.
Good luck
Hi malihu!
I installed your plugin, but it does not work, the idea is to scroll the page horizontally.
Website: http://utveckling.afoto.se/
What im doing wrong? π
Hello,
The plugin does not create horizontal layouts or modify theme templates in any way.
It’s scope is to create/connect links, target elements etc. and scroll the page accordingly.
It works on existing layouts. You need to first create a horizontal layout template or install a horizontal layout theme before using it.
Hope this helps
hi malihu,
its an outstanding plugin but am facing an issue,
The page doseβt scroll down but it suddenly jumps. how could i solve it. any suggestions please?
Hello,
If the page “jumps” it means that the plugin is not enabled on your link(s) (assuming your target elements are setup correctly).
Have you enabled “Page scroll to id” on your links? If yes, how (by rel attribute, by class, by selector, shortcodes)?
I can’t really help without seeing your page… Can you post your link?
Hello Malihu. Thank you for creating such an awesome WP plugin! I had one quick question: I followed the instructions for adding the full navigation path so that scroll to id will work on other pages as well. However, just as one example, when I click on a menu link (https://badjoyproductions.com/#contact), the page reloads first, then scrolls to the contact section. When I was only using #contact id for the link url, the page would scroll down to the contact section right away (and smoothly).
I am needing to use the full url as detailed in your instructions because I have a blog page (I am linking to it from the blog section on the home page), and when I go to the actual blog page (http://badjoyproductions.com/blog) all of my menu links appear as they do on the home page, but they are dead links (don’t function).
Any suggestions on how to bring back the page scroll behavior for full url paths and not have the page reload before it scrolls to the section?
Hello,
Your issue can be fixed easily π
The re-loading happens because your full URL links do not match exactly your site’s URL. Your server seems to always use the
www
prefix (withouthttps
). Your links do not have thewww
prefix so they don’t get recognized as same page links (thus refreshing the page).All you have to do is to add the
www
part in your links. For example, change PRODUCTIONS URL from:http://badjoyproductions.com/#productions
to:
http://www.badjoyproductions.com/#productions
Doing this should do the trick. Just make sure your links URL match the address bar URL.
You da man Malihu! That did the trick!
Please send me your Paypal info. I cannot log into my Paypal account from your donation button link for some reason (it won’t allow me to log in when I click the link for “Already have a Paypal account?”).
Thanks again for the quick response on this.
-Eric
Sent. Thanks π
Great plugin! Though it says it’s compatible, when I installed it on my 4.6.1 WP site I get 500 internal server error. I tried it on a clean install with it being the only active plugin and it does that same thing. As soon as it’s deactivated, the site comes back. I love the plugin too much to not try and get it resolved. Thanks!
Hello,
I’ve tested the plugin on various 4.6.0-4.6.1 installations (clean install, old install, being the only plugin, with other plugins, on local server, on remote-live sites etc.) without any issues at all.
Are you using a Windows server (instead of a Linux one)? I’m asking cause the only time another user said they got a 500 error was on a Windows server.
Let me know
Thanks for great plugin. I have a sticky menu on a one page website and I want to be able to scroll smoothly back to the top when clicking on home button in menu. Any ideas as to how I can accomplish this. Have created a id marker in my header file, but doesn’t quite scroll all the way to the top.
Thanks.
Your id marker is probably not on the very top(?)
A quick way to do it automatically is to use the URL
#top
in your page scroll to id link (no need to create the target). The plugin will scroll the page automatically to the top (HTML body element position)Hi, my using the plug-in because the theme’s scroll to ID isn’t working. The thing is when i click on a menu item the menu vanishes. It also looses it’s properties: sticky herader, etc.
Any help?
thx.
Hello,
I’m not sure I can tell why the menu disappears as the plugin does not manipulate any element (beyond the actual links) in any way.
I inspected your menu links and they seem to have 10 additional javascript events (click, focus etc.) so maybe another plugin or a theme script tries to do its own page scrolling and it conflicts with ‘Page scroll to id'(?)
What happens when you temporarily deactivate ‘Page scroll to id’? What’s the theme’s behavior in regard to menu links and page scrolling?
Thank You for this plugin but please let me know how can be the speed reduced while going down, it suddenly moves down.
Thank you!
Does the page “jumps” instead of smoothly scrolling? If page scrolling is not animated the plugin might not setup correctly. If you can post your link I’d be able to help.
hi malihu,
even i have the same issue. the page dose’t scroll down but it suddenly jumps. how could i solve it any suggestions?
Hi, thank you for this wonderful plugin!
It works fine (have installed it on a development site with X-Theme)
I have a very long page with photos and managed to scroll this with your plugin very slowly vertically.
Now when I try to stop the scrolling by clicking on the scrollbar or use the mousewheel, it will not stop nor change.
What could I do here?
Thanks in advance
Bernd
Hello,
At the moment there’s not an out-of-the-box way to stop page scrolling. You can only do it by adding an additional jquery script in your templates or theme.
If you have the ability to add such script, then something like the following will do what you need:
$(document).on("mousewheel DOMMouseScroll mousedown keyup touchmove",function(e){ //stop page scrolling animation on mouse-wheel, click, keyboard and touch var el=$("html,body"); if(el.is(":animated")) el.stop(); });
I cannot get this to work with Themify Ultra theme. for the sections, it does not use <div id. How can I get it work??? I have been following your instructions but they don't help. No scrolling at all. Frustrated.
Here is the website that I am working on. ambazador.com I wanted the pages to scroll vertically. However, there is no auto scrolling I cannot get it to work.
The link within the <div code for the sections is tb_section-pg1 and tb_section-pg2. I am unsure how to make them work.
(please remove my name from the prior posts. I do not want my name to live here on the web forever)
It also is identified by: module_row_0
and
module_row_1
Hi,
It seems that your theme does not allow the plugin to work. The theme scrolls the page via some custom javascript (using the mouse-wheel and keyboard) while the html, body and content elements have overflow hidden (there’s no scrollbar).
The way your theme’s layout is set and the way it functions prevents other plugins from working with its page scrolling.
Thank you SOSOSO much for this plugin.
My question is this: when i link to a section, the nav scrolls to the center of the div= cuts off half of the div content.
How can I make it snap to top of div?
Thanks!
Do you have a fixed/sticky top menu that hides the top-half of your content divs when page is scrolled? Is this what you mean?
If yes, see Offsetting fixed/sticky menus. You have to use the “Offset” option to offset scrolling according to your sticky menu height.
Yes that’s what I mean but offset function isn’t working for me.
I tried 300 (px) and .site-header but there were no changes on page.
Thanks!
I’d have to see your site/code in order to help. Can you send me a link?
Actually appears to be working in firefox and safari- just not in Chrome.
Ideas for how to troubleshoot this?
Thanks!
I can’t really help unless I see your site. The plugin is browser-agnostic in the sense that if it works in one browser it works on all. My guess is either some other script handles your links or maybe some CSS property needs to be changed, but there’s no way to know without interacting with your site and see the code.
Sorry= real information would help huh?
It’s http://www.mapmavin.com
Like I said- works brilliantly in other browsers but not in Chrome (funny it’s usually the other way around)
Thanks!
I checked your link in Chrome and it seems that offset is working. Did you fixed it?
I see that you’ve set its value to
.site-header
which is correct as it offsets your sticky menu.In addition, it seems that your mobile menu (narrow viewport) does not need the offset as it’s not fixed/sticky.
In order to make the offset apply only on the fixed menu, try changing the value to:
.site-header:fixed
Working now!
π
Can you remove this thread? Didn’t mean to put my personal email as name. (or change the name pls)
Thx
Done.
Hi
Is there a way of scrolling to a featured image?
If you visit http://nervenetdevelopment.co.uk/addvision/lagerlosning/
This is basically a blogroll, showing posts from a certain category. If I had the target to the top of the text I want to offset it so it goes to the featured image associated with that post.
Any ideas greatly appreciated.
Cheers
Malc
Hi,
I assume that you cannot insert a target element above each featured image because the code generating them is in your theme’s template, correct?
I don’t know what exactly you want to do (what you links will do etc.) but instead of inserting the target in the content and use the ‘Offset’ option to adjust scrolling, I’d suggest using the existing id attributes already generated by your theme.
Finding the id attribute of each post/article is easy if you use browser’s developer tools. I don’t know how familiar you are with HTML but try this:
Open your site in Chrome. Right-click on post’s featured image and click on “Inspect”. Developer tools pane will open and you’ll see the site’s code. The image element (
<img />
) will be already selected (it’s the featured image). Right above it you’ll see the wrapper element which is an article tag (<article />
) which has the id attribute you want (e.g.<article id="post-42" ...>
).Does this makes sense? Is this what you need?
Hello,
To be honest i am quite lost and i might did something wrong , but i can not tell you what…
You can see i created two section , and i would like them to be one after each other ( That s why i installed your plugin).
But afeter readind and doing what asked your tutorial, i can t have this twho page in the row.
Here the link of the web site: http://goo.gl/1JjQKd
Do you think you can help me on this? Might be so simple for you but so difficult for me ahah
Thanks a lot!
best regards,:)
The best would be to have a skype screen share, so you can explain me how to configure it. And what i did wrong.
If you would like to do it but want to be pay, that i would understand, there is https://codeable.io/, just tell me.
Hello,
The plugin does not create or modify posts/pages content. Its scope is not to help creating the content (it just “connects” links with content sections). I checked your link and there’s no content at all.
You have to create the content as you normally do in WordPress and your theme.
Then you can create the 2 target sections that correspond to your 2 links (#section-1 and #section-2). For example, you can create the targets using plugin’s shortcodes inside WordPress post/page editor:
[ps2id id='section-1'/]
Hello,
Thanks for your answer!
I think i made it better, but still a lot of things that i don t know how to do.
To make you understand better.
I would like to have section A and section B display on a same page, section A is a showcase, section B is a contact form. like in your demo http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html
I will put number to be more understandable for you:)
1) I thought at the first time that scroll to id plugin made severals PAGES display in a same page. But i understand that it is link that are display in a same page. I understood this. Am i correct?
2) here the screenshots of this plugin settings
https://www.dropbox.com/s/9bo9m0v2316i1lx/scroll-menu.PNG?dl=0
https://www.dropbox.com/s/yonv4407q9hbzxu/scroll-page-contact.PNG?dl=0
3) In the settings i put in selectors field :
a[rel=’m_PageScroll2id’], .menu-item a
But dont know if i should do that….
Here the link of my settings :
https://www.dropbox.com/s/umefnphgk0u526c/Page%20scroll%20to%20id%20%E2%80%B9%20themapharma%20%E2%80%94%20WordPress.pdf?dl=0
4) The shortcodes appear in the page, put i don t know how to make it not appear..
https://www.dropbox.com/s/4ec350ao38rb9wc/scroll-1.PNG?dl=0
When i use css
display: none —-> The link don t work any more
if i use : visibility: hidden : it is working but there is still a space….
5) In my menu when a page is selected, there is a green border around the text.
When i select a section in the menu or when i go on it by scroling, it not making the border.
https://www.dropbox.com/s/77tvxsvgqobjaf8/menu-border.PNG?dl=0
How to make it work.
Thanks a lot !!
I hope you could read all my several questions!
Again thanks.
Best regards,
You’re welcome π
1) ‘Page scroll to id’ plugin replaces the default browser behaviour of “jumping” to page sections when links with URL containing # are clicked, by smoothly animating the page to those sections.
It is not a theme or content generator plugin and does not create or modify posts, pages, theme templates etc. Its scope is strictly page scrolling. It helps you create links and anchor points (targets) in addition to animating the page and highlighting links and target sections.
To make several posts or pages displayed within a single page (e.g. the homepage) you’ll have to use a WordPress theme that has this feature or develop your own theme template/function (which of course requires some knowledge on wp development).
2) and 3) All your settings and shortcodes seem correct.
4) You don’t need any CSS rules.
I’m not sure why the shortcodes don’t work…
In your link
http://themapharma.com/caroussel/
I see the shortcode displayed as plain text which should not happen.In page/post editor, try switching from “Visual” to “Text” tab, re-insert the shortcodes and save to see if it works.
5) We’ll deal with this after 4) works.
I thanks for your answer:)
Can you send me an email with your contact skype? if it is ok and possible for you?
Or doing it by codeable.io .
i have several questions, and i think would be much more easier thats way.
What do you think?
Best regards,
Hello ,
You my prefer by comments:)
I change the url in menu, put all in full url the link. ,
1) You can see is working, but still the problem with the white block wich appear… Don t know how to fix this.
https://www.dropbox.com/s/dyv9fcze31kdcoo/scroll-css.PNG?dl=0
2) The menu, when it is full link, section 1 and 2 are bordered when i am on the page but i only want section 2 menu get border when i am in section 2 and section 1 get border when i am in section 1 . Not all in the same time.
Do you know how to fix this?
https://www.dropbox.com/s/f3h1j972uq5i6fs/scroll-border-2.PNG?dl=0
Thanks a lot π
Best regards
7gulli7
It seems that the shortcode you’re adding on the editor is inserted as a code block (the target element is wrapped in
pre
tag). That’s why it has a white background, paddings etc.I don’t know how your theme post editor works but there should be a way to insert plain text/content in it(?)
If you can’t figure out how/why this happens, send me an email to discuss further.
Hello malihu.
My page doesnt scroll smoothly between sections can you help me?
url: http://amagidesarrollo.com/
Thanks!
I get a 404 error in your link (no content, section etc.)
It was my fault, please try again if its possible.
Thank you so much anyway!!!
I checked your link again and it seems that your theme (or perhaps another plugin?) handles your menu links while preventing ‘Page scroll to id’ from functioning.
When I inspect the menu links (via browser’s developer tools) I see an additional javascript click event bound, which is the one causing the problem (if this event is registered from a theme script or another plugin I can’t tell).
I also added and tested on-the-fly (again via developer tools) a regular, non-menu link and ‘Page scroll to id’ works fine on it. This means that the other/problematic script affects only navigation menu links.
Check if there’s some setting in your theme to disable such behavior or try deactivating other plugins that might handle links/page scrolling.
Hope this helps
Thank you so much for your time and advices!
I ‘m working on them!
Hi,
I have installed your plugin, but page doesnt scroll smoothly but jumps to desiganted section.
Site url: http://zamawiajacy.pl/konferencja/
Hi,
I checked your page and it seems that none of plugin’s resources (js scripts and files) are included in the document.
Have you developed the theme? It probably lacks the
wp_footer()
function (info). If this function is missing, you need to add it in your footer.php just before the closing body tag.Let me know if this helps
Great! Many thanks, that was it.
Your articles donβt beat around the bushes exact t to the point.
wordpress themes
Hi,
I just installed your plugin and it does exactly what I want (smooth scroll) but one I click on a link it scrolls to the page top instead of down to the div.
link: Link
Any Idea why? I am working with a custom bootstrap theme.
Kind regards,
Damien
Hi,
I can’t really say unless I see your page… Maybe you have another element with the same id in your page? Is the target element position correct when you inspect the page with browser’s dev tools?
This issue might be very simple or complicated but using firebug or Chrome dev tools (right click – inspect element) you can search for the target element (the target id) and see its position etc.
If you could post/send me your link I’d be able to help.
I am getting to grips with WordPress and find videos really useful. Whilst I think your plugin is awesome some detailed demos for us less technically proficient would be really helpful to take advantage of it.
Thanks and keep up the good work!
Thanks a lot for the feedback and suggestion! I’m planning on doing several video guides by the time I publish next plugin version (1.6.2).
malihu i couldn’t thank you more!!!!!!! Your plugin is awesome!!!!! π π Yes you are right!! Again many many manyyyyy thanks!! π
You’re welcome π
Hello malihu! Thank you for your amazing plugin! It’s exactly what i was looking for!!! π But i have a problem and i would like your help please. I have made anchors on the menu and also had the codeflavors menu(to be floating menu sidebar). I checked in screen options Link Relationship (XFN) and on the id’s i have on XFN m_PageScroll2id. Also i made offset 60 , i enabled Scroll to location hash and also tried on selectors id add a[rel=’m_PageScroll2id’], ul#menu-menu_sidebar li a. But nothing can you please tell me what am i doing wrong? sorry but i am newbie. Again many thank you π
the site url is http://twelvesec.saits.gr/
I checked your link and the plugin, menu links, offset etc. seem to work as expected. Did you fixed it? Do you need help with a specific issue?
Thank you malihu for your time!! π Yes i would like please help because i am newbie. What do i have to do extra when the user scrolls down to change background in the sidebar menu(team, services,etc)?
To highlight the menu items on page scroll, add the following in your CSS:
#cfn_floating_menu ul li a.mPS2id-highlight { background: #ED1C24 !important; }
You’ll notice that the first menu item (“TWELVESEC”) stays always highlighted. This happens because its target element is the whole page wrapper! You need to change this target (the element with the id: keimeno_twelve_sec) to an element inside the first section (just like the rest of your sections).