jQuery: Auto scroll to top
Question
i use this script to open a modal:
<script type="text/javascript">
$(function(){
$('.compose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page. So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
Is it possible to send the user automatically to the top when the modal is opened?
3 answers
solution1
11 2013-09-30 07:38:38
use below code to move to top of page:
$('html, body').animate({scrollTop: '0px'}, 0);
Instead of 0, you can have some other value like 500 (its in milliseconds) to make it move to top slowly
solution2
2 ACCPTED 2013-09-30 07:48:04
You can add position: fixed and for example top: 30px to styles for #popup_bestanden_edit_name . If you do that, modal will appear always in the same place, no matter where the user is on the page. But then you must be careful, because if modal is higher than viewport, you won't be able to see the remaining part of modal.
If you still want to scroll to top (without animation), using JavaScript you can put
$('body').scrollTop(0);
right before your return false;
BTW, if you want to prevent default action of a link to fire, it's a better practice to do it that way:
$('.compose').click(function(event) {
// your code here
event.preventDefault();
}
solution3
0 2013-09-30 08:09:10
I would suggest not to scroll to the top of the page. It is not good UX Design! We can have overflow hidden on the body. So, user can not scroll once popup comes to screen. We need to give position fixed to the main element of the popup.
I would suggest to check below snippet.
<html>
<head>
<title>Example</title>
<style type="text/css">
.nooverflow {overflow: hidden;}
.popup {position: fixed; z-index: 99;}
.cover {position: fixed; background: #000; opacity: .5; filter: alpha(opacity=50); top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.popup-conteiner {overflow-y: auto; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 101;}
.popup-block {position: relative; top: 100px; z-index: 101;}
</style>
</head>
<body>
<div id="popup">
<div class="cover"></div>
<div class="popup-conteiner">
<div class="popup-block">
<!-- POPUP's HTML GOES HERE -->
</div>
</div>
</div>
</body>
</html>
But, if it does not work then you can scroll page to the top of the page. You can use solution given by Rajesh as well. I would like to add a condition that if page is already animated then stop before doing new animation.
var htmlBody = $("html,body"),
top = 0;
if (htmlBody.is(':animated')) {
htmlBody.stop(true, true); //Need to stop if it is already being animated
}
htmlBody.animate({ scrollTop: top }, 1000); //Scroll to the top of the page by animating for 1 sec.
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.