Coder Social home page Coder Social logo

skrollr-menu's Introduction

skrollr-menu 1.0.3

skrollr plugin for hash navigation.

Documentation

In case you want to use hash links, e.g. <a href="#section-about">About</a> you need to know the following:

  • If you animate top, margin-top or anything that moves the element up/down, the browser won't be able to jump to the correct position and you may end up somewhere else
  • If you're using skrollr on mobile they won't work at all, because we're not using native scrolling there

But we've got you covered. Download the dist/skrollr.menu.min.js file and include it right after the skrollr.min.js file. Then you need to call skrollr.menu.init(s) passing the skrollr instance as first parameter and optionally some options. Here's a full example.

var s = skrollr.init(/*other stuff*/);

//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(s, {
	//skrollr will smoothly animate to the new position using `animateTo`.
	animate: true,

	//The easing function to use.
	easing: 'sqrt',

	//Multiply your data-[offset] values so they match those set in skrollr.init
	scale: 2,

	//How long the animation should take in ms.
	duration: function(currentTop, targetTop) {
		//By default, the duration is hardcoded at 500ms.
		return 500;

		//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
		//return Math.abs(currentTop - targetTop) * 10;
	},

	//If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`.
	//You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.
	handleLink: function(link) {
		return 400;//Hardcoding 400 doesn't make much sense.
	},

	//By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`.
	//If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part.
	//The following will all work (if the user is on the correct page):
	//http://example.com/currentPage/#foo
	//http://example.com/currentDir/currentPage.html?foo=bar#foo
	///?foo=bar#foo
	complexLinks: false,

	//This event is triggered right before we jump/animate to a new hash.
	change: function(newHash, newTopPosition) {
		//Do stuff
	},

	//Add hash link (e.g. `#foo`) to URL or not.
	updateUrl: false //defaults to `true`.
});

And in order to fix the problem with the wrong offset, you are able to specify the target scroll position right at the link, e.g.

<a href="#section-about" data-menu-top="500">About</a>

This link will cause the page to scroll to 500. But you should let the the href point to the actual target because if skrollr or js are disabled, the links will still work.

As of skrollr-menu 0.1.10 you can also use percentage offsets by appending a p to the number. E.g. data-menu-top="75p" will scroll down 75% of the viewport height.

Offsets

When you don't want the target element to be perfectly aligned with the top of the viewport (that's what the browser does), then you can use data-menu-offset on the target element to specify an offset from the top.

For example when you have a fixed navigation with a height of 100px, then you probably want skrollr-menu to put the element at least 100px from the top in order to not disappear behind the nav.

<section id="kittens" data-menu-offset="-100">
	<h1>If it fits, I sits</h1>
	<p>Some text about felines (the internet loves felines).</p>
</section>

Note how the offset is negative, because we want to scroll down 100px less than normal. Or in other words, we want to stop 100px before the element. Positive values work the opposite way (scroll farther than usual).

Ignore links

If you want skrollr-menu to ignore some of the hash links add an empty data-menu-ignore attribute.

Programmatically triggering a click

If you want to click one of the menu links programmatically, simply pass the link DOM element to the skrollr.menu.click function. Skrollr menu has to be initialized first!

var link = document.querySelector('a');
skrollr.menu.click(link);

Per-link duration

Instead of using the duration option, you can also specify a duration per-link by using the data-menu-duration attribute.

<a href="#awesome" data-menu-duration="5000">#awesome over 5 seconds</a>

Changelog

1.0.3 (2015-06-19)

  • Fixed issue with clicking elements which get removed from the DOM (#77)

1.0.2 (2015-04-06)

  • Added updateUrl option (#75).

1.0.1 (2015-01-24)

  • Added data-menu-ignore support (#7, #64).

1.0.0 (2015-01-16)

  • Added a change event which triggers before jumping to a new position / changing the hash (#61).
  • Call this 1.0.0 already...

0.1.15 (2014-11-06)

  • Added data-menu-duration attribute (#57).

0.1.14 (2014-10-03)

  • Added the complexLinks option (#55).

0.1.13 (2014-09-26)

  • Fixed issue with jumping to hash when page was loaded, but no link to the hash exists #(54)

0.1.12 (2014-05-10)

  • Added skrollr.menu.click

0.1.11 (2014-03-14)

  • Fixed links not working inside SVG elements (#37)

0.1.10 (2013-11-21)

  • Added support for percentage offsets in data-menu-top (#20)

0.1.9 (2013-11-19)

  • Added scale option (#23)

0.1.8 (2013-10-28)

  • Added handleLink function option (#24)

0.1.7 (2013-10-18)

  • Use skrollr.addEvent instead of addEventListener in order to have the events removed when skrollr gets destroyed (#21)

0.1.6 (2013-10-13)

  • Don't jump to the hash on page load, only after init is called (#8, #12, #19)

0.1.5 (2013-07-13)

  • The duration option now also accepts a function to dynamically calculate the duration based on how far the animation will scroll (#9).

0.1.4 (2013-06-23)

  • When clicking on a link, change the hash in the url (#3). With back-button functionality.
  • Also, when entering the website with a hash inside the url, jump to it.

0.1.3 (2013-05-21)

  • Only listen to left click (#2).
  • Added data-menu-offset (see documentation).

0.1.2 (2013-05-21)

  • Made the plugin work again (stupid regression from 0.1.1).

0.1.1 (2013-05-18)

  • Handle the case when the clicked link doesn't have a href attribute at all.

0.1.0 (2013-05-18)

  • Moved skrollr-menu to a dedicated repo

skrollr-menu's People

Contributors

a-v-l avatar disasterman78 avatar prinzhorn avatar sprankle avatar stianlik avatar supa86000 avatar toruta39 avatar ydm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

skrollr-menu's Issues

Add spy functionality

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.

data-menu-top simply doesn't work

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

Only parse href's with a certain class

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).

Support the scale option

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.

Scroll or Jump to the position

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

Anchors do not have own permalink

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?

Can't integrate into the original skrollr demo

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);

handleLink() - How to get actual scrolling direction?

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!

Hash navigation on page load ignores data-menu-offset

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

Hash URLs not loading properly on page load

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!!

Support navigation with hashtag + another mark

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?

skrollr.menu.click(link) not working

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

Fixed position using skrollr constants?

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?

negative margin-top

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.

Only first link detected/working.. second is simply ignored

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.

Wrong version of Minified library in release 1.0.1

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.

IE7 modifications

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.

  1. For "var href = link.getAttribute('href') " - Unfortunately IE7 will return the full URL instead of the actual text inside "href". You need to use some extra flag in getAttribute.
        //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;
        }
  1. Since IE7 doesn't set "e.which" or "e.button" for click events, assume every click is valid.
        // 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)

Using arrows for navigation

Is there a built-in option for the navigation to be controlled by the up and down keyboard arrows?

Thanks!

Hash URL Issue Skrollr.Menu

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.

Natural scrolling duration

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

Scroll to section without click

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);

Added Code to Exclude Class

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; 
         }

Page is loading at the top of the window. Hash URLs rendered useless when going to links. Help!

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

support setting offset in option

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.

Skrollr menu overshoots position

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.

Reload/refresh

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

Scrolling to #id while passing though a div with % fluid height.

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.

Active menu item class

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.

Skrollr-menu scrolls to same location based on handlelink

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,
});

Event in menu when scrolling page

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! :)

Fixed-positioning and skrollr menu don't work together

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

Modify duration on specific links

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)

Doesn't work

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?

hash tag supplied not scrolled to when landing on the page, fix included

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.

skrollr-menu not working on mobile

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.

apply to specific selector option, or add data-attr to disable specific links

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.

data-menu-offset percentage offset

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?

Jumps to top in Safari a few seconds after page load

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.