I have a few buttons on my page and onclick
they show or hide a few <div>
elements.
The <div>
elements are positioned towards the bottom of the page so scrolling to those <div>
elements is necessary.
Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?
Here is one of the buttons:
<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>
Here is the <div>
that appears when the button above is clicked:
<div class="row">
<div id="Section-1" class="col-md-10">
<p>The section to appear.</p>
</div>
</div>
Here is the JavaScript:
$("#Button-1").click(function () {
$("#Section-2").hide();
$("#Section-3").hide();
$("#Section-1").toggle("show");
$("#Button-1").text(function(i, text) {
return text === "View Details" ? "Hide Details" : "View Details";
});
return false;
});
Here is my research:
Article 1
Any help would be appreciated.
UPDATE
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.
To stop a web page from scrolling to the top when a link is clicked that triggers JavaScript, we call preventDefault in the link's click handler.
One way you can prevent navigation is to implement an click / onclick JavaScript event handler and return false from it. Alternately you can use event. preventDefault() inside the click event's event object passed into the handler too.
It is safe to click on that link with # href; the page does leave/reload url. Follow the above advice with caution, as HTML5 rules explicitly state that href="#" is supposed to navigate to the top of the page. You can simply add the href attibute without content, and get the click behaviour.
Method 1: Using window.scrollTo() The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.
Firstly mention the element correctly in the title. Its a a
not button
.
Next: The #
in your a
tag will by default take you to the top of the page when you click on it.
Use a javascript:void()
in the href
attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a>
</div>
This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv"
jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"
), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:
$('.button').click(function() {
$('#lastclicked').text(this.textContent);
});
$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
e.preventDefault();
$('#lastclicked').text(this.textContent);
});
// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.
body {
height: 5000px;
padding: 50px;
}
.buttons {
position: fixed;
bottom: 0;
}
.button, .button-x {
display: inline-block;
padding: 20px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a href="#" class="button">Link with href="#"</a>
<a href="#mydiv" class="button">Link with href="#mydiv"</a>
<a href="#" class="button-x">Link with href="#", but a preventDefault.</a>
</div>
<div id="mydiv">
Last clicked: <span id="lastclicked"></span>
</div>
The important part is the e.preventDefault()
, which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With