Mixing
![Applying substitution to $int sqrt{1+sin(x)}$ [duplicate]](https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/s72-c/photo.jpg?sz=32)
How to prevent page from loading when want to scroll
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
html css
edited Jan 1 at 16:35
Nandini Venkateshan
25828
asked Jan 1 at 16:14
user123user123
1421212
add a comment |
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
html css
edited Jan 1 at 16:35
Nandini Venkateshan
25828
asked Jan 1 at 16:14
user123user123
1421212
2
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use aformfor this. Instead, use an<a href="#demo-section">and style it as a button, because that's what it is: a navigational link.
– Mike 'Pomax' Kamermans
Jan 1 at 16:22
add a comment |
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
html css
edited Jan 1 at 16:35
Nandini Venkateshan
25828
asked Jan 1 at 16:14
user123user123
1421212
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
html css
html css
edited Jan 1 at 16:35
Nandini Venkateshan
25828
asked Jan 1 at 16:14
user123user123
1421212
edited Jan 1 at 16:35
Nandini Venkateshan
25828
asked Jan 1 at 16:14
user123user123
1421212
edited Jan 1 at 16:35
Nandini Venkateshan
25828
edited Jan 1 at 16:35
Nandini Venkateshan
25828
edited Jan 1 at 16:35
Nandini Venkateshan
25828
25828
asked Jan 1 at 16:14
user123user123
1421212
asked Jan 1 at 16:14
user123user123
1421212
asked Jan 1 at 16:14
user123user123
1421212
1421212
2
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use aformfor this. Instead, use an<a href="#demo-section">and style it as a button, because that's what it is: a navigational link.
– Mike 'Pomax' Kamermans
Jan 1 at 16:22
add a comment |
2
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use aformfor this. Instead, use an<a href="#demo-section">and style it as a button, because that's what it is: a navigational link.
– Mike 'Pomax' Kamermans
Jan 1 at 16:22
2
2
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use a
form for this. Instead, use an <a href="#demo-section"> and style it as a button, because that's what it is: a navigational link.– Mike 'Pomax' Kamermans
Jan 1 at 16:22
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use a
form for this. Instead, use an <a href="#demo-section"> and style it as a button, because that's what it is: a navigational link.– Mike 'Pomax' Kamermans
Jan 1 at 16:22
add a comment |
2 Answers
2
active
oldest
votes
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
add a comment |
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
<a href="#demo-section">demo</a>
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996973%2fhow-to-prevent-page-from-loading-when-want-to-scroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
add a comment |
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
add a comment |
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
edited Jan 1 at 16:29
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
answered Jan 1 at 16:19
A. MeshuA. Meshu
9072719
9072719
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
add a comment |
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
setting the type as you mentioned cause that button not work. I deside to use <a tag and a div to make a scrolling button
– user123
Jan 1 at 16:41
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
Of course. It need also move the "action" from the form to an "onclick" event etc.. Glad you choose the anchor way - it is what you mean to do anyways (-:
– A. Meshu
Jan 1 at 16:48
1
1
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
OK, using anchor is more simple :)
– user123
Jan 1 at 16:49
add a comment |
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
<a href="#demo-section">demo</a>
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
add a comment |
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
<a href="#demo-section">demo</a>
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
add a comment |
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
<a href="#demo-section">demo</a>
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
<a href="#demo-section">demo</a>
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
answered Jan 1 at 16:30
MeiogordoMeiogordo
4017
4017
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996973%2fhow-to-prevent-page-from-loading-when-want-to-scroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Unless you're writing an actual form, with choices that the user needs to make, or fields that the user needs to fill in, don't use a
formfor this. Instead, use an<a href="#demo-section">and style it as a button, because that's what it is: a navigational link.– Mike 'Pomax' Kamermans
Jan 1 at 16:22