How to redirect to another page and specific div on button click in mvc
Question
I have one page called Page1 which have a button.
<button onclick="redirecttodivofotherpage(); "></button>
The other Page2 have 3 Div
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I want to redirect to div3 on button click of Page1 button.
How to do it with controller or jquery.
5 answers
solution1
5 ACCPTED 2016-09-08 05:33:53
You could try something like this:
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location = "..../#div3";
});
})
The string "..../#div3" represent the relative url of your page and at the end has a #div3 . This way, using window.location , you would be redirected to the page you want and using #div3 to the section you want.
solution2
5 2016-09-08 05:54:44
This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie .
Check this sample solution Note: Click on Events to nav to the other page.
**http://plnkr.co/edit/hBJj69nP6kvrEuoCVw3k?p=preview**
solution3
3 2016-09-08 05:41:14
try this working demo, that will work
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <button class="click">Click Me</button> <div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;"> hello anuradh </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".click").on('click',function(){ window.location = "#mydiv"; }); }); </script> </body> </html>
or else you can scroll it nicely like this
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <button class="click">Click Me</button> <div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;"> hello anuradh </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".click").on('click',function(){ //window.location = "#mydiv"; $('html, body').animate({ scrollTop: $("#mydiv").offset().top }, 2000); }); }); </script> </body> </html>
solution4
2 2016-09-08 05:44:16
Use a window.location.hash to scroll to the element with the id
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location.hash = "#div3";
});
});
solution5
0 2021-01-08 08:00:36
Try this, it works for me:
<a class="className">link</a>
$(".className").on("click", function () {
window.location = "yourPage.html#divId";
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.