We Keep Coding

how to move the screen without a click to the bottom of the page using JavaScript?

I am trying to create a website using JavaScript. I need to programm it in such a way, that when you open the website, you directly get to the bottom of the page (without clicking anything). That means, the page moves itself automatically downwards.
How can I get this done?

Use window.scrollTo() function
window.scrollTo(0,document.body.scrollHeight);

Here's a good answer:
how to automatically scroll down a html page?
Including a live demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
Html:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
Enjoy :)

Call This function on a component or page that you want the particular behaviour. This function will scroll to the bottom of the page. There won't be any scrolling effect without the css for smooth scroll. I have shown how to specify the css for the scrolling effect below, incase you require the scroll behaviour.
function scrollToPageBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
If you require the scroll behaviour:
Here, I'm specifying the scroll behaviour on the root itself. You can target specific containers as per your requirement
*{
scroll-behavior: smooth;
}
P.S: This question has many answers already posted but I am sharing
this because no one talks about the css scroll behaviour which some
users may require. This answer is specific to the question where the
OP wants to scroll to the bottom of the page without any user action
when a page or component is opened or rendered but also specifyiuing the CSS for scroll behaviour if a user requires it.

Scroll not working on Android Chrome only

For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated

By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}

In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)

e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem

I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)

pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;

Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;

stop the page scrolling when selecting/dragging text

I have a page where I do not want the user to be able to scroll. In order to prevent it, I just set the body to have a hidden overflow style. This is sufficient up until the point where a user tries to select some text and then drags to the bottom. The window then scrolls with the users dragging. How can I prevent this?

use position: fixed;. If you want the whole body to be non-scrollable:
body
{
position: fixed;
}
EDIT: after receiving the comment from user Sam, I've decided to go back and test this method once again. Now that I reconsider it and Sam's concern that it would mess with styles, I've come to the conclusion that the following would be a better solution:
html
{
position: fixed;
width: 100%;
height: 100%;
}
The prevents some sites (stackoverflow included) from ending up left aligned. It also uses the highest node available, which should have been done in the first place.

I tried Josephs answer but it can mess up a lot of the style on the website.
Another way would be to set the overflow of the website to hidden, this is also far from ideal but it didn't mess up any styling for me, hopefully this is helpful to someone.
body {
overflow-y: hidden;
}

It can be helpfull
html
{
overflow: hidden;
}

How can I disable the scroll bars of a page?

how to disable the scroll bars of the page.
and disable this button.

The scrollbars are a CSS issue. You can add this to your page (or the inner part to a CSS file):
<style type="text/css">
html, body {
overflow: hidden;
}
</style>

You can't disable that button (or any other method of scrolling the page); see this. However, you could scrollTo(0,0) anytime you detect scrolling. This might look ugly (page scrolls a bit, then jumps back up).
For disabling the scrollbars, you can try setting html, body { overflow: hidden }; I think some browsers may not honor this.
(Wouldn't it be better to just create a page that fits into the viewport, so that the scrollbars aren't shown?)

$(window).scroll(function() {
scroll(0,0);
});
If you want to use it you need to have jQuery imported.

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;
should disable the scrollbars in most browsers.
See: http://www.eggheadcafe.com/community/aspnet/3/10088543/how-to-disable-document-body-from-scrolling.aspx

I am making a mobile website, but I don't want it to be a whole bunch of webpages, so I am making it one page with scrolling disabled. I did this with
<style>
html, body {
overflow: hidden;
}
</style>

This will remove your scroll bar. [I did it by accident]
#media screen{
body>div#header{
position:fixed;
}
body>div#footer{
position:fixed;
} `

This works:
* {overflow: hidden}
One problem I have when figuring it out was that I have a CSS drop-down (well slide across) menu on the page and that doesn't show when I use this method. I am still trying to figure out how to get the drop-down to work with this enabled.

How to disable scrolling the document body?

I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
I tried:
document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
Any ideas?

If you want to use the iframe's scrollbar and not the parent's use this:
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.

with css
body, html {
overflow: hidden
}

The following JavaScript could work:
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
page.classList.add('noscroll');
To enable Scroll use:
page.classList.remove('noscroll');
In the CSS file, add:
.noscroll {
position: fixed!important
}

add this css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
$("body").addClass("disable-scroll");
and when to enabled run this code
$("body").removeClass("disable-scroll")

I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.

Answer :
document.body.scroll = 'no';