flesler/jquery.localscroll

Animated anchor navigation made easy with jQuery

jquery.localscroll's Issues

In Windows Chrome horizontal scrolling is not working

It's works fine in Mac and Windows Safari.

Browser Resize

When i resize the browser the browser loses its scroll position. How can i keep that from happening?

loading initial hash value on load

Hi,
I'm using the plugin in a single page app using knockout js.

I have a URL structure like this:
http://1.2.3.4:1111/user#/ViewItems/fa4d9583-6e37-470b-9974-07f771ee329d/what

and I have 4 sections called:
what, where, when, who

all of which are wrapped in a long horizontal rectangle, and using localscroll to scroll to each view.

the problem is if I want to load a section just on load, so if a user copies the url, or they even reload the page.

since it's not using traditional hashing, is there another way localscroll can recognize each section?

Does not work with jQuery 1.8.0

When using the library with jQuery 1.8.0 it does not work.

offset value for responsive design

any way to set a variable here or use a media query check before defining this option?

Margin at top

I have a menu at the top of the page which is fixed in position, therefore I need a margin of 70px if you understand what I mean, so the browser actually scrolls 70px less than it otherwise would. Any ideas?
Great plugin though thanks!

I want to convert all link instead 2 ID

Hello
Thanks for this awesome scroll plugin.

I am try to use $.localScroll(...) but instead 2 ID like #accordian #testimonial. but no luck

i have tried filter this is also not working for me. maybe i am doing wrong something ?

can you please provide me details how i can use without 2 ID.

Thanks very much for help

Not scrolling in google chrome and safari

Hello,

If I use this plugin it doesn't scroll but it just springs to the div instead of scrolling smoothly.
How to fix this?

Accessibility and Keyboard navigation

So I have to remove this from my site because it is causing issues with our keyboard users and skip navigation links, after they "skip" to the main content, the focus returns to the top of the document so it does not help them skip anything. Is there a way to set the focus properly after they scroll so their keyboard navigation can pick up where it should on the page? Maybe using .focus({preventScroll:true}); after this feature finishes?

localScroll with lazy option on works, but only if the link content is text

Hello,
I found what seems to be a bug with lazy option defined as true. Checkout jsfiddle for further information
http://jsfiddle.net/mreis1/8QHXL/2/

offset issue when deep linking to #something

$('#main-nav').localScroll({ target:'#content', hash:true, offset:-144 });

The offset works perfectly except when I link direct via the browser address bar and it ignores the offset value.

hash:true and offset value causes page to jump

Great plugin(s)!

I've got a fixed nav header, so I am using negative offset to position things correctly. When combined with hash: true, it causes the page to jump briefly before the scroll starts. I have slowed the duration down to try to see what's going on, but I'm having trouble debugging.

The hash is added to the address bar before the animation completes, but that doesn't seem to be what's causing the jump (it's not jumping to the hash spot of the page), but rather jumping up the height of the offset. So if I have offset:-100, the page jumps up 100px before the start of each scroll.

If I remove either offset or hash from the settings, this problem disappears.

For what it's worth, I've also added a click handler to the local links so I can add remove classes as necessary. This isn't the issue either though, as removing those click handlers doesn't change the behavior.

Any idea what's wrong here?

Many thanks!

Offset is not respected when linking to a hash from another page

With localScroll version 1.3.5 and Chrome 37 the offset option is not respected when linking to a hash from another page.

It seems to work in Firefox 37 and Safari 6.1.2.

NPM dependencies

If I understand correctly, localScroll sets a dependency for scrollTo in it's package.json, but doesn't actually include it. So you have npm install jquery.scrollto yourself and then include it, (or require('jquery.localscroll/node_modules/jquery.scrollto/jquery.scrollTo').

localScroll should require('jquery.scrollto') correct?

Create offset value on the fly

I currently have this and it works perfectly
$offset = $('.menubar').height();
$('.page-nav').localScroll({ hash:true, offset: {top:-$offset} });

Anyone know if its possible to set the offset value on the fly, like this. Of course this code doesn't work hence the request.
$('.page-nav').localScroll({ hash:true, onBefore:function( e, anchor, $target ){ offset: {top:-$('.menubar').height() } } });

I'd like to be able to adjust the offset value without having to call localScroll every time the height of the menubar changes.

Possible?

Thanks

lazy option doesn't work with jQuery 1.10.2

Ajax and lazy option doesn't work with jQuery 1.10.2, what makes it impossible to use this plugin with rails/turbolinks.

Missing tags from the repo

It would be great if you could add some tags to the repo so it is easier to refer to the library from Bower.

Offset isn't recognized on first click

Everything works as expected except when I click on one of the localScroll enabled links, the offset is not respected (the page is scrolled to the top of the containing div instead of 'top of the containing div + offest'). If I click on the localScroll enabled link a second time (or any time thereafter, or any other link) the page is scrolled in accordance with the specified offset.

I'm at a loss. Any help is greatly appreciated.

$(document).ready(function(){ $('.local-scroll-enabled').localScroll({ offset: { top: -60 } }); })

does not work $target.is(":animated") and $target.stop(true)

in the old version I saw an additional event "._scrollable()". Together with the old version jquery.ScrollTo.1.4.6 it work. I want to use the latest version, but my knowledge is not enough to fix this.

problem when usin on scrollable elements

I've notice that if you use the plugin with scrollable elements and you use the scroll in those elements, the behaviour sometimes looks like there's a bug.

Url with the example of the problem:
http://jsfiddle.net/oms02/s53h7gko/26/

Scenario:
There's a wrapper (small size) wich has inside two large scrollable divs (once upon the other) with six floated elements with a height bigger than their parents so that the user can use the scroll.
In resume, the "map" look like this:

---

| 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 |
-- -- -- -- -- -- -- -- -- -- -- --
| 2.1 | 2.2 | 2.3 | 2.4 | 2.5 | 2.6 |

---

Steps:

1. Click on the link "go to section 2.1". This correctly leads you to that div.
2. Scroll on the section and before you click on the other link, make sure the div#section2.1 is not on the top (scroll). In this case, you won't be able to see the text of the box.
3. Click on the link "go to section 2.2": on the second movement (on the y axis) it scrolls on the whole wrapper, which is wrong because the scroll should happen on the #div2. The text of the boxes look like hidden. If you scroll on the boxes of section 2, then you'll see the content, but you can see that the plugin didn't bring you to the correct position.

Slide Starting from a 3

I have 5 Slide, the slide starts from 1, i want to start a from 3

Direction to understand below

1
234
5

$.localScroll({
target: '#content',
queue:true,
duration:1000,
hash:true,
});

Compatibility with jQuery 1.8.3

Hi Ariel,

Since upgrading WordPress to version 3.5, which comes bundled with jQuery 1.8.3, it seems the scroll functionality is no longer operational.

It would be very much appreciated if you could inspect this functionality soonest and update this repository accordingly. :)

Thanks and regards,
Matty.

Page jump on reload with `hash: true`

I am upgrading from 1.2.8 to 1.4.0 and noticed something new: using hash: true, on page reload of example.com/#my-hash (i.e. #my-hash is somewhere in the page), there is now a jump from top of the page to the position of #my-hash.
Previously, the smooth scroll would happen on click but not on reload.

This is due to this block, which assumes that if hash: true is set, not only the hash of the selected link, will appear on the address bar (per L47) but also that I want to animate scroll on page load.

Is there a way to disable the second part of that statement? If not, would you be open to adding a new setting (load: true/false?) that would enable/disable this block?

Smooth scrolling does not work

Hey, i am trying you plug-in after many failed attemps, i can not make it work, i saw the documentation etc.
The site is here: https://phentonas.000webhostapp.com, the scrolling buttons are in info section

Introduce a sample in README.md

disable localScroll handlers once added?

Two issues in one day - I don't mean to be a pest!

Is it possible to disable localScroll after it's been added? As part of a responsive implementation, I'm activating localScroll only on wide screens, and just using regular anchor links on narrow screens. This works fine (I add localScroll based on a media query match when the page reaches a certain width) but is there a way to remove it if the browser is scaled down?

It seems like filter might work (basically filter out all the links) but I'm not sure of the filter syntax. Can I pass a jquery selector to filter? All I can find is that filter takes a "String or function filter to ignore some of the links" but I don't see any syntax examples or any use of filter on the demo pages.

Thanks!

Invalid value for "licenses" in package.json

I was running a tool to scan my project for open source licenses and ran into an error for this package.

The value for the "licenses" key is "MIT", but "licenses" is expected to be a String. The simplest fix would be to change the key from "licenses" to "license".

Thanks!

Hashkey

Hey Adam, is it possible to change the hashkey value?

Instead of using
www.example.com/ajax.html#key=value

could it be
www.example.com/ajax.html#!key=value

then google should be able to pickup that theres more "pages".
atleast according to https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

Clicking links gives no result in Chrome 61

Links that were working as expected in previous Chrome versions - with smooth scrolling to the target - are now failing to work at all; clicking them produces no result.

ITS NOT WORK: $target.is(':animated') AND $target.stop(true)

its worked "$target.stop(true)" if only "target: window" or if the change on "$(this).stop(true)".
what to do with it I did not understand "$target.is(':animated')"

Dynamically update 'offset' parameter

Hi there,

I'm using localScroll on several websites using this simple setup:

localOffset = jQuery('.site-header').outerHeight();
jQuery('.main-navigation').localScroll({
	offset: -localOffset,
});

It works just fine when the site-header height doesn't change, however sometimes I have to deal with dynamic headers that shrink when the user scrolls down.

When it happens, there's obviously a misalignment of a bunch of pixels between the anchor position and the shrinked header.

I was wondering if there's a way to dynamically adjust the offset parameter according to the most-updated value, such setting a timer.

Thanks in advance

Localscroll back to root with sub folder

Hello Ariel,
I have a bug with the use of localscroll, and I can't solve it...
When I use it with the root domain name (ie. http://www.mydomain.com ) it work perfectly, but If there is a subfolder in the url (ie. http://www.mydomain.com/en/ ) the script doesn't work and send the anchors to the root url --> http://www.mydomain.com/#about

Did you know how can I solve this problem?

Thank you

Ben

Super strange : the plugin works only with 'targer' option

Yes, when I use like this $('#top-menu').localScroll({targer: $('#main')}), it works. Yes you read well, targer and not target. For me target doesn't work, whether I use a jQuery element or a CSS selector.

Respect isDefaultPrevented()

IMHO plugin should not scroll page if isDefaultPrevented() returns true. I've patched your code with following lines, probably it's worth to include it into mainstream.

    return settings.lazy ?
        // use event delegation, more links can be added later.     
        this.bind( settings.event, function( e ){
            // Could use closest(), but that would leave out jQuery -1.3.x
            var a = $([e.target, e.target.parentNode]).filter(filter)[0];
            // if a valid link was clicked
                    // PATCHED NEXT LINE ================================================
        if( a && !e.isDefaultPrevented())                                                                    
                scroll( e, a, settings ); // do scroll.
        }) :
        // bind concretely, to each matching link
        this.find('a,area')
            .filter( filter ).bind( settings.event, function(e){
               // PATCHED NEXT LINE ==================================================
               if(!e.isDefaultPrevented()) {                                                                                
                    scroll( e, this, settings );
                }
            }).end()
        .end();

Hi flesler

I have copied your demo to localhost server. but ajax not working, it stop loading. scroll to work, but ajax not work. why so. help me thanks

Not working only in Windows Chrome (OSX Chrome and all other Windows browsers work fine).

Just discovered this anomaly where the plugin seems to be totally unresponsive on Windows Chrome 33. I've read through the other closed issues and some similar Stack Overflow questions but to little avail. I'd be interested to know if anyone else has had this problem and what their solution was. You can see the website in question here: http://wvandaal.github.io/