Develop Reference

How to prevent hashchange scroll in JavaScript?

I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?

Does scrollintoview work when there is less content on the page and there is no page scroll on the web page because of less content

Does scrollintoview work when the targeted element is within the page of less contents because of which page scroll does not appear on the web page
Issue is my scrollintoview functionality works fine and scroll smoothly to the targeted element when the targeted element is in the web page having scroll bar. But fails when the same targeted element is in the web page having less contents , because of which scroll bar of the web page won't appear, and my scrollintoview functionality to the targeted element is not working

One-page scroll plugin: don't want content to slide

I want to change my website to one-page scrollable. I'm trying to achieve something like this. When a user "scrolls" the content changes. I thought I could do that with the one-page scroll plugin, but wasn't successful.
Further explanation:
I want menu and few other elements to be "fixed" (visual explanation).
I want to just change the content, not slide it up or down as the plugin does.
To sum up, I want to trigger animations (block revealing effect etc.) when a user scrolls. I was thinking about making a website one-page scrollable and when a user scrolls, just redirect it to a new folder with HTML/CSS/JS files (menu stays the same, content changes). Maybe that would be one possible solution to my problem?
Anyone willing to share the solution with me?

First things first. The site you're referencing isn't using any scroll events. Open the site in Chrome and open developer tools. Then set the view to mobile (or tablet, same thing). If you're in mobile mode in Chrome, your mouse acts like a finger would on a real Smartphone. By that logic your 'swiping' over the screen with your mouse should trigger the scroll event, but it doesn't. Therefor, it isn't actual scrolling that is triggering the fancy animations.
I believe Fleur Moreau used an 'mousewheel' event listener to trigger the animations.
var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
}, false);
or if you're using jquery
$('body').on('mousewheel',function(event){
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
});
Good luck with your project

Trigger click on div so it will scroll on pagedown and pageup

When I physically use the mouse to click on my div, then pageUp and pageDown scroll the div. However, when I programmatically trigger a click on the div, then pageUp and pageDown fail to scroll the div. How can I get pageUp and pageDown to scroll the div without the user having to physically click in the div?
Details:
What I am trying to do is to let the user pageDown to the bottom of the div, then one more pageDown loads the next set of content into the div and auto-scrolls to the top; and vice versa for pageUp. It works great as long as the user has clicked inside the div. I am trying to make it so they don't have to actually click in the div to be able to scroll via pageDown or pageUp.
I am certain that the programmatic click is happening because the click event listeners get triggered. My pageUp listener also works to load the previous set of content (because the scroll bar starts out at the top).
I am developing within Node-Webkit (Chrome) and angular.js, but cross-browser support is also necessary.
Things I have tried:
$('#div').click();
$('#div')[0].click();
$('#div').trigger('click');
$('#div').focus();
$('.focusableThingInsideDiv').focus();
$('#div').scroll(); //just trying random things at this point
I have also tried stopping the default browser behavior and implementing the scroll myself (via setting scrollTop). This technically works. However, I would prefer not to override the default behavior if possible.

The page up and page down work, after you click on the div, because it gains focus. So, although it does not show as a focused element after clicking, you still want the $('#div').focus() line.
The tricky part is that to be able to focus on a div programatically you need to give it a tabindex. Something like <div tabindex="0">...</div> will make the focus suddenly work in Chrome.
Other browsers (IE and Firefox) do not seem to required this. The focus() will work from the start but adding tabindex=0 will not hurt.

Receiving touchmove events when scrolling a child iframe

I'm developing a mobile-designed webapp which loads content into an internal iframe. This frame updates its height every time new content is loaded to avoid scrolling inside the iframe. In that way I have a long iframe which is scrolled in the context of the main webapp. This is currently working well in Safari and Chrome for iOS. The most simple example of the app structure is:
<div id="header">
<p>Scroll: <span id="scroll"></span></p>
<p>Touchmove: <span id="touchmove"></span></p>
</div>
<iframe src="https://developer.android.com/about/dashboards/index.html" class="frame-style" id="uframe"></iframe>
In order to trigger certain visual effects I need to know the current Y-axis position of the application's content. I'm using Jquery's bind function to receive touchmove events from touch devices. Scroll events are not very useful since on mobile devices they are only triggered at the end of the scrolling, I need to know the position of the Y-axis every time it has been changed by scrolling. Unfortunately I discovered touchmove events aren't triggered when scrolling starts touching the iframe's contents. I'm using these statements:
$(window).bind('touchmove',
function(){
console.log('touchmove='+window.pageYOffset); //Show in console
$('#touchmove').html(window.pageYOffset); //Update value in document
});
So the question is: Is there any way to receive touchmove events when scrolling a child iframe?
The running example can be checked on: http://jsfiddle.net/badger_cl/b9322/1/
To try it on a mobile device you can access: http://fiddle.jshell.net/badger_cl/b9322/1/show/light/
The red stripe is a div element, when the touch-scrolling starts from this element, it updates the touchmove value. When the scrolling starts at the iframe content (The Android dashboard in this case), it doesn't update the touchmove value. Scroll updates are shown just to demonstrate it only updates at the end of the scrolling.

You can listen to touchmove event both on parent page and on page loaded into the iframe.
Next you will need to communicate from iframe to parent window that touchmove event happened. You can use Window.postMessage method for this.
Send message from iframe:
window.parent.postMessage(messageObj);
Receive message in parent window:
window.addEventListener('message', function (event) {
var messageObj = event.data;
});
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage