prinzhorn / skrollr-menu Goto Github PK
View Code? Open in Web Editor NEWskrollr plugin for hash navigation
License: MIT License
skrollr plugin for hash navigation
License: MIT License
On a site I'm currently working on, I use skrollr and skrollr-menu. I also use a tab system that's based on anchor links.
Since skrollr-menu will do its thing to every anchor link on a page, my tab system will now smooth scroll when not intended.
It would be useful to have an option in skrollr-menu that allows you to define a menu class, so that only <a>
elements with that class will be used for smooth scrolling by skrollr-menu
(I am not sure how to add the "feature request" tag, first time using GitHub commenting).
this
Great scripts! Best I've come across.
A tiny thing... Sometimes an issue arises when you may need to scroll to a section, but there isn't a link for it. To solve it, I just did this... (in jquery)
var link = $('<a/>');
link.attr('href', hash);
skrollr.menu.click(link[0]);
but it might be nice to just give skrollr-menu a hash to scroll to. Something like this...
skrollr.menu.goto(hash);
As I said before, I only see a problem with this portion https://github.com/Prinzhorn/skrollr-menu/blob/master/src/skrollr.menu.js#L198 Maybe we should exclude it and instead document it (people would need to include it manually in their code). It needs to be run ASAP, I think its too late when it got fetched by the loader.
tried to use skrollr.menu.click(link) as explained:
var link = document.querySelector('a');
skrollr.menu.click(link);
//my link is "#section-king"
the init code:
var s = skrollr.init({smoothScrolling: true,forceHeight: false});
skrollr.menu.init(s, {complexLinks: true,easing: 'outCubic', duration: 2000});
i'm using the latest versions.
thanks for helping.
Yossi
I'm having 2 issues on my website http://clintrobinson.net. First is the nav bar linking to content sections while the scroll position at the top. It won't scroll to the correct offset. Is this because of the changing height on the .feature div??
Secondly, The scrolling will not scroll the whole page on a mobile. I am confused as to whether the non skrollr content is to be in the #skrollr-body div or outside of it. I am also not positive that is the problem, as I have had it both was but cannot make it work.
Any help would be appreciated. Thank you.
Hi,
I don't know if I'm doing it wrong but for me skrollr-menu it's not working.
I'm working on a website and I'm using skrollr so I can set negative margin-top when scrolling but hashlink are not working.
I used your example and I set
"h1 id="awesome" Awesome /h1" to "h1 id="awesome" data-0="margin-top:0px" data-1000="margin-top:-500px" Awesome /h1" but the hashlinks are not working properly.
anchors are taking over, no value in data-menu-top makes any sort of difference.
ie
[a href="#home" data-menu-top="50">About</a]
goes to #home, rather than 50.
unless there is some undocumented js change i should make
Hiya, I had a look at the previous fixed position menu issue but it doesn't really apply to me as I can't use percentages as depending on the screen size it will vary.
I currently have a div that is using constants. Is there anything like data-menu-_foobar="200"? Am I able to achieve something like this?
Currently when the skrollr js file is included, the url is parsed for hash tags and if skrollr is initialised issues the command to scroll to said id/name element.
However if like me you initialise the skrollr on document.ready (so you can do things like set dynamic key frames and position elements off the stage (right or bottom) skrollr is not initialised when the js file is loaded/parsed, and hence the command to scroll to the named anchor is ignored (you end at the top of the page each time thanks to the scrollTo(0,0) command).
I would suggest modifying as per ๐
What I did first is locate the final function wrapped in a defer, which has had the if(document.querySelector)...statement remmed out, leaving the scrollTo(0,0) intact to stop the standard 'straight to hash' intact.
I then moved the entire function wrapped in the function (in the defer) to the end of skrollr.menu.init and remmed out the scrollTo(0,0). Now it works fine and dandy for me, and animates the scroll to the hash supplied after skrollr is initialised.
As a feature request, it'd be really great if an active class was added to the current menu item. In order to use this I'll need to figure out a way of adding that as the designs I work with always have an active state.
Hi,
Isee 3 open issues all discussing errors with hash navigation on page load, but they don't seem to specifically site the data-menu-offset being ignored on the initial scroll when you arrive at a page with a hash in the navigation.
I have a website using skrollr with a 60px fixed header, so use data-menu-offset="-60" on each of my content panels. My navigation links work just fine when clicking after the page has loaded, but if you arrive at the page with a hash in the URL, skrollr kicks in and scrolls to the top of that DIV, but ignores the offset. Seems like maybe it's initiating too early or just ignoring that property on init()..
Apologies if this has been covered already - I scrolled through open and closed issues and couldn't find it described quite like this.
Cheers
It would help identifying what version I have on the system and if it's the most current. Thanks!
If I'm on the root page "/" and click an anchor such as "/#link", the skrollr takes me there just fine. However, when I go to the actual /#link URL, it jumps back to the top of the page right after loading. Something in my skrollr.menu.init function seems to be doing the problem:
My project:
http://prbbi.com/services/pr/test/
So for example, if you go to this link, it jumps back to the top of the page after loading:
http://prbbi.com/services/pr/test/#reports
Is there any chance that you could add a bower.json manifest file to skrollr-menu repository?
Just like this one here: https://github.com/Prinzhorn/skrollr/blob/master/bower.json
The most important thing is "main" property because it's required to work with rails assets.
Let me know, thanks
Can you please review my site converty.mindfck.farm:1212? It used to work when you click on the menu and suddenly stopped, no console errors... I find it weird that I'm unable to debug issues with the most popular parallax scrolling library :) ๐
I hate it when someone takes my middle click. This time it was myself...
It would make sense for skrollr-menu to support the scale option in the same way that skrollr does.
This would prevent data-menu-top
and data-[offset]
needing to be different.
I'm having issues with Skrollr menu overshooting target destinations... I may just be missing a setting. Clicking the hash links at the top of the site causes the position to keep shifting until it centers on where it's supposed to be, but it can't seem to calculate the correct position the first time. The site can be found here. Thanks in advance.
When I click on "1000 pixels down" nothing happens. Should the page scroll down 1000 pixels?
Hello, thanks for such a great tool.
I have an issue that I am struggling with: I am using the menu to SCROLL to the particular positions/elements. I also have cases when I need to JUMP to the positions/elements. How I can selectively chose if the menu item should scroll or jump?
There is a menu setting "animate" that sets this functionality for the entire menu, but would it be possible to have an tag attribute such as data-menu-animate="true" to achieve that functionality:
[ul]
[li][a href="#sa-scene-01" data-menu-top="0" data-menu-animate="true"]Scene 01[/a][/li]
[li][a href="#sa-scene-02" data-menu-top="0" data-menu-animate="false"]Scene 02[/a][/li]
[/ul]
Thank you
I'm using skrollr-menu like this:
<a href="#slide4" data-menu-top="250p"></a>
I'm using the skrollr keyframe option to high light the menu items when reaching the desired position, but the events are not fired when skrollr-menu reaches the data-menu-top scrolling value.
In order to get the event fired I need to +1p when scrolling down and -1p when up.
So I came up with this possible solution:
<a href="#slide4" data-menu-top="250"></a>
handleLink: function(link) {
var t=parseInt(link.getAttribute('data-menu-top'));
if(scrolling=='down'){
t = String(t+1)+'p';
}
else{
t = String(t-1)+'p';
}
//console.log(t);
return t;
},
But I dont' t know how to get the scrolling direction....
Can you help me please?
Thanks!
I tried to enable the complexLinks functionality but the site scrolls to the wrong position. However, the anchor navigation does work as expected. see http://feldenkrais-praxis-graz.at/#teachers for example.
does this option depend on any other skrollr options?
Implemented as detailed and doesn't work. Downloaded source and that doesn't work either. What is the secret to get this working that is missing from GitHub?
If the height of fixed navigation menu alway be 100px, that would be handy.
skrollr.menu.init(s, {
animate: true,
offset: -100}
)
or a function just like duration does, the height of fixed navigation menu could be changed with scrolling.
I'm using skrollr-menu at http://ayakorem.co.il/carousel/
The scrolling to hash sections works on desktop but not on mobile. It is not clickable at all.
I read the documentation and saw that it is a common problem, but couldn't find out what i'm doing wrong.
Any help would be appreciated.
Hey. Love the plugin. We're having an issue with Safari jumping back to the top of the page a few seconds after load. The issue doesn't show up in Chrome, only Safari as far as we know. Is this a known issue? Or are we just doing it wrong?
Thanks for your help,
James W.
currently, data-menu-offset can't handle percentage offsets.
I fixed it by changing line 134 to:
//Is it a percentage offset?
if(/p$/.test(menuOffset)) {
targetTop += (menuOffset.slice(0, -1) / 100) * document.documentElement.clientHeight;
} else {
targetTop += +menuOffset;
}
Can you add this to the source?
All links targeting the element which is currently in view should get a class (default = active
). Should handle data-menu-offset
and other funky stuff which skrollr-menu does. And optionally update the hash while scrolling.
I would like to have a tag like:
<a href="#section1" data-offset-top="200p">Section 1</a>
which would move the top of the page to 200% of the viewport height.
When you set data-menu-offset to 90p it doesn't work...
Hi there --
I have an issue I can't understand. I'm reading the doc again and again, I try everything I can (data-menu-top, data-anchor-target,...) and none of these changes seems to be working at anytime.
Problem: I have two anchor tags that I want to use on one page but only the first one get animated. The second link change the url when it's clicked but nothing happens. The page stays on the same position and simply ignore the animation.
code here: edited
The problem looks rather simple in itself and the fact I did not find any issue related to this seems to suggest I must be struggling more than the majority here..
Any tip is more than welcome. Thanks in advance.
So I have a page based on the The "main" example, and as I did not want a continue scroll but stopping at some point to do animations etc I am using the css fixed-positioning.css..
It all works nicely but having the fixed positions makes the skrollr-menu to stop working as it does when not using fixed-positioning.css.
It makes my menu items to scroll to half of the items or no scroll the page at all, or just a portion.... you have to click the menu item few times before this gets the anchor link to the top
any idea how to solve this?
Thanks a lot
Hey, there is any support to navigate around a parallax with the menu plugin in differant way it used to be?
I mean, when we use # only to navigate around its not SEO friendly. the method google asked us as developers is to add some kind of another mark after the #, like "!" (e.g. http://example.com#!this-new-section ), so in this way, google bots will recognize it as a page of the website.
unfortuntally, i didnt find a method (or successed to create one) for this thing. everytime i add the "!" mark after the #, the link is broken and nothing work. is there any workaround?
Thanks Alex for your contribution!
I don't know if IE7 is officially supported for this (and you probably don't want to! :).
For others who want to support IE7 browsers, here are some changes I made to skrollr-menu. I'll probably branch these changes if I have more time later.
//Don't use the href property (link.href) because it contains the absolute url.
var href = link.getAttribute('href');
// ADDITION FOR IE7 - link.getAttribute('href') in IE7 returns full URL so try again with flag 2
if (href != null && href.indexOf('#') !== 0) {
href = link.getAttribute('href', 2);
}
//Check if it's a hashlink.
if(!/^#/.test(href)) {
return;
}
// CHANGE FOR IE7 - default to 1 if e.which and e.button aren't defined
if((e.which || e.button || 1) !== 1) {
return;
}
Hope this is helpful to someone.
(EDITED: removed "mousedown" solution whichย had too many unintended consequences)
Is there a built-in option for the navigation to be controlled by the up and down keyboard arrows?
Thanks!
I can't seem to get Skrollr menu to look for the actual link and animate to it. Rather, it appears that it looks at handlelink, and returns a value for how far to scroll based on that, but that's hardcoded in at 400. If I try to comment the handlelink out, the script no longer functions.
i'm hosting this online while i'm working on it as well. I'm only currently testing on the index page.
http://www.philkong.com/parallax
var s = skrollr.init();
var t = skrollr.init();
skrollr.menu.init(t, {
animate: true,
easing: 'outCubic',
scale: 2,
duration: function(currentTop, targetTop) {
return 1000;
},
handleLink: function(link) {
return 1000;
},
complexLinks: false,
});
I have developed a dropdown style menu.
How do when scrolling the page to execute an event in the menu for change the label with the section correct?
Example:
Vertical Menu dropdown
"Home"
"About us"
When scrolling the page and arrival to "About us" change the label with "About us".
Thank you! :)
Hi and thanks for a great plugin,
im using the menu on my site http://preview.m-l.no/tango/
The problem is that maybe 1 out of 8 clicks in the menu โ especially http://preview.m-l.no/tango/#terasseoggrill โ the scroll-animation "hangs" for maybe 3-6 seconds around 20px-50px off target before it slides down to the right anchor.
Can anyone help me with that? :-)
/Anders
How can I integrate skrollr-menu into skrollr-master/index.html (the original skrollr demo) to test it?
So far I've had no luck. I'd love advice on how to do this or a working example.
When I click the link to #easing, nothing happens.
Here's what I've tried:
1.0 made a link to #easing with this code at the top of the page to make it scroll to the easing section of the demo:
<div style="background: red; color: white; z-index: 1000; position: fixed; top: 0;">
<a href="#easing">Easing....</a>
</div>
2.0 pasted skrollr.menu.js into the src folder and included it below the skrollr.min.js with this code:
<script type="text/javascript" src="src/skrollr.menu.js"></script>
3.0 I've tried these code variations to get it to work...
3.1 Using the original code from skrollr-menu-master/index.html (removing forceHeight: false, this breaks all scrolling):
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s);
}, 500);
3.2 Including skrollr.menu.init(s); below the original javascript:
var s = skrollr.init({
edgeStrategy: 'set',
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
skrollr.menu.init(s);
Hey there - I used this library for a wordpress dev site recently. The site had a carousel that contained hash-tags. Skrollr would scroll to to the top of the window of the carousel that had the same id as the left and right arrows of the carousel. I added the following code to the handleClick function which excludes my "carousel" class name. It could be expanded to include id's as well or to be passed a variable for exclusions.
/* Check if link is in carousel. Exit function if true.
(added by M. Lacourse) */
var node = link.parentNode;
while (node != null) {
if (node.className) {
if (node.className.indexOf("carousel") >= 0) {
return;
}
}
node = node.parentNode;
}
is it possible to implement a data-menu-duration in stead of having an inaccessible global function for it? Or give the duration function the provided link clicked in any way?
This would make it possible to have a button fallback in stead of scrolling and turn skrollr in to a more complex animation tool (just think about a "Watch that in slow motion" button)
Hi, I know there are several other issues posted that are related to this but none seem to reflect the behavior I'm seeing.
Navigate to:
https://crypteron.com/cipherdb#plans
It takes you to a position on the page significantly above the actual anchor link. If you click on "Plans" in the sub menu you can see the actual location. I have a lot of different CSS and scroll animations going off that might be a factor but I'd really like to get some type of work around in place so I can link to this specific position. Any help is incredibly appreciative, thanks!!
When clicking on a menu entry, besides moving the viewport to the actual anchor, #anchor should also be added to the url, for future permalink reference.
Right?
I have a link in my footer that links to another internal page's section. When I click the link it will follow the page and jump to the section like a normal browser does but I get an error
Uncaught TypeError: Cannot call method 'relativeToAbsolute' of undefined
When I removed the hash from the url and reload the page it works fine. I haven't been able to find out what's going on so far.
It would be nice if there were a reload or refresh method so that the plugin could re-collect the positions of elements that it is trying to navigate to.
For example (for me), when using position:fixed elements and edgeStrategy: reset, it becomes impossible to use the menu to navigate to directly adjacent elements if the next element is still relative, but is positioned in a place such that the currently in view element will still be fixed. Slightly hard concept to explain accurately, but needless to say I'm sure this method would be useful in other cases too.
Edit: First time filing an issue. Unsure of how to label this as feature request
Hi, have a nice day. Thanks for all your efforts. Just want to report that in the latest release version skrollr-menu 1.0.1, the minified version of the library it's the version from skrollr-menu 1.0.0. In that version isn't working the "data-menu-ignore" logic.
I verified from the github release tab and downloaded the code in .zip and .tar.gz to check. Also bower gets this package.
Heya! I really like your skrollr project but I felt there was something amiss (like #9). So I coded it. Unfortunately I'm really awkward at using git so I'll just paste the feature request code here and you can do with it what you want.
What it does is take the current distance between your positionY and the target into account, then calculate an appropriate transition speed. "Appropriate" as in: "don't scroll at ultra lightning speed when scrolling to distant elements; but also don't take ages". This is achieved by sqrt(), and a magic number that felt right (25).
var handleLink = function(link, fake) {
//Don't use the href property (link.href) because it contains the absolute url.
var href = link.getAttribute('href');
//Check if it's a hashlink.
if(!/^#/.test(href)) {
return false;
}
//Now get the targetTop to scroll to.
var targetTop;
//If there's a data-menu-top attribute, it overrides the actuall anchor offset.
var menuTop = link.getAttribute(MENU_TOP_ATTR);
if(menuTop !== null) {
targetTop = +menuTop;
} else {
var scrollTarget = document.getElementById(href.substr(1));
//Ignore the click if no target is found.
if(!scrollTarget) {
return false;
}
targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');
var menuOffset = scrollTarget.getAttribute(MENU_OFFSET_ATTR);
if(menuOffset !== null) {
targetTop += +menuOffset;
}
if(window.pageYOffset) {
var currentYOffset = pageYOffset;
} else {
var currentYOffset = document.body.scrollTop;
}
var distanceY = Math.abs(currentYOffset - targetTop),
naturalDuration = Math.sqrt(distanceY) * 25;
}
if(supportsHistory && !fake) {
history.pushState({top: targetTop}, '', href);
}
//Now finally scroll there.
if(_animate && !fake) {
_skrollrInstance.animateTo(targetTop, {
duration: (_duration === "natural" ? naturalDuration : _duration),
easing: _easing
});
} else {
defer(function() {
_skrollrInstance.setScrollTop(targetTop);
});
}
return true;
};
Best regards,
Harti
Currently, this plugin adds it's functionality to every single hash link in the document.
Hash links aren't always used to jump to a section. In my case, I'm using fancybox which looks for #element_id in a link's href to open that element_id in a modal.
Would be nice to have an option that will only apply skrollr-menu event to a specific selector.
Alternately, could use data-attr to manually prevent certain elements from receiving event.
Alternately, could use data-attr to manually specify which elements will receive event.
I have skrollr-menu working very well on desktop browsers, but when my site is accessed from a mobile device, it doesn't seem to be working. I understand the problem is probably on my end, but I so far have been unable to track it down. The dev site url is below...thanks in advance for any help you can offer...
http://scdev01.ucdavis.edu/oneucdavis/public/one_california/index_nocms4.html
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.