I have a hidden div, which I toggle into view. The layer contains some filtering options and can be higher then the viewport. If the user scrolls, closes and reopens, then he should see the div from the top not where he left off. I tried scrollintoview without success.
How can I make the layer show always from top?
<script>
$("#filter_button").on("click", function(){
if ( $("#filter_button_inner").text() === "Zurück" ){
$("#filter_box").toggle()
$("#myform").scrollIntoView();
}
else {
$("#filter_box").toggle()
$("#myform").scrollIntoView();
}
});
</script>
<div id="filter_box" hidden >
<form id="myform">
</form>
</div>
jQuery
You can use the scrollTop(0) function in jQuery to scroll to top. It returns the current vertical position of the element if called without passing any variable. You can learn more about it here.
Here is how you can scroll to top once the page is ready.
$(document).ready(function() {
$(window).scrollTop(0);
});
If you want to scroll the window at the start of your form then you can do something like this:
$(document).ready(function() {
$(window).scrollTop($("#myform").offset().top);
});
Javascript
In javascript you can use scrollTo() function to get the desired result. More details on scrollTo().
window.scrollTo({ top: 0 });
You could even add smoothing to the scroll
window.scrollTo({ top: 0, behavior: 'smooth' });
Hope this helps.
Related
I'm new to HTML and Javascript and want to create a link that, when clicked on, scrolls to a specific position in the page. I made some research online and came up with the following solution:
My HTML file:
...
My link
...
My Javascript (which I include in the <head> tag):
function scroll() {
window.scrollTo({ top: 300, left: 0, behavior: "smooth" });
}
However this does not work well, because every time I click the link, the page just scrolls to the very top of the page, regardless to what position I set in window.scrollTo. Can somebody point out where my mistake is and how to do it right?
Thanks!
I do not know your html structure completely
Maybe this method will help you :
function goToTarget(){
var element = document.getElementById("target");
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}
#target{
margin-top:100pc;
}
<button onclick="goToTarget()"> click me </button>
<div id="target"> i am target </div>
Going on the assumption that you want a smooth scroll to a specific position on the same page, you could setup your HTML as tacoshy recommended, using an anchor for the place you’ll click and a reference #id for your destination:
My link
<h2 id="my-link">My Link Section</h2>
Then, if you’re using jQuery on your page, you can add a listener to the anchor tag:
$(".same-page-link").on("click", function(event) {
var $target;
event.preventDefault();
$target = $($(this).attr("href"));
$("html, body").animate({
scrollTop: $target.offset().top - 50
}, 1000, "swing").promise().done(function() {
$target.attr('tabindex', '0'); //Adding tabindex for elements not focusable
$target.focus(); //Setting focus
});
return false;
});
the - 50 is to offset the top of the scroll position from a fixed header, if you have one.
If you’re not using jQuery, there is a pure JavaScript solution on GitHub that you might be able to adapt for what you need.
As for your original function window.scrollTo({ top: 300, left: 0, behavior: "smooth" }); I think that’s always going to bring you to a position 300 pixels from the top of the window, and may not work for IE or Safari (I don't think they support the options version of scrollTo).
I would like to make an effect like : click a button, and the top div will hide, then bottom div will scroll from top to bottom.
I have finished hide the top div, but it's failed to make the bottom div getting down (?
I think maybe it's because my css and js get something wrong (?), but I'm not sure, and I've modified several times. = (
Here's my javascript code:
$(function(){
$("#btn1").click(function(){
$(".slot-top").hide();
$("#slot ul").animate({ top: "0em" },1500);
return false;
});
});
Here's my code: https://jsfiddle.net/b1mj1c1L/
You messed up the jQuery Selector.
Instead of $("#slot ul").animate({ top: "0em" },1500); use $(".slot").animate({ top: "0em" },1500);.
See here: https://jsfiddle.net/b1mj1c1L/1/
I have a div name scrollable and whenever I hover mouse over it I want scrolling limited to this div only so that after reaching top/bottom of the div, scrolling will be stuck to the div. I've used the following code:
<div class="scrollable" style="overflow-y: scroll; height: 2px;"
onmouseover="document.body.style.overflow='hidden'"
onmouseout="document.body.style.overflow='auto'" >
Some text<br>sometext<br>sometext
</div>
Doing this gets the job done, but only problem as main scrollbar is hidden the webpage looks weird everytime I hover over '.scrollable'
Also using window.onwheel=function(){return false;} doesnt help as it prevents scrolling of anyelement.
Is there a way to enable scrolling only on hovered div and not on others while keeping main page scrollbar visible?
Thank you
You can disable scrolling without hiding the scrollbar, check this post.
Using jQuery, this would lead to:
$(".scroll").hover(function() {
var oldScrollPos = $(window).scrollTop();
$(window).on('scroll.scrolldisabler', function(event) {
$(window).scrollTop(oldScrollPos);
event.preventDefault();
});
}, function() {
$(window).off('scroll.scrolldisabler');
});
Check it out.
For me, hopefully can work
$('body').on('mousewheel', '.someDIVClass', (e: any) => {
if (e.originalEvent.wheelDelta / 120 > 0) {
// You can get scroll value here to do other things
}
else {
// You can get scroll value here to do other things
}
// This will prevent window to scroll
e.preventDefault();
e.stopPropagation();
});
I have a scrolling function that reveals a 'scroll to top' element when user scrolls to 160 pixels, when clicked this element the page scrolls to the top of the page.
I want to use that function create more scroll buttons which will be revealed at different stages in the document and that scroll to different areas.
For example when the user scrolls to 400 pixels down the element "next" appears when clicking it page scrolls 300px down, they get to 900px from top a new scroll element appears which when clicked scrolls down to 1300px, and so on.
here is the jQuery code i have:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 160) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
HTML:
<div class="scrollToTop-container">
<img src="img/icon_arrow_up.png" width="24" height="24" /> <br/>Scroll to top
</div>
i hope thats not too confusing.
Thanks
Maybe you can use a function like this I made reusing some parts of your code:
function scroll(id,show,limit,timeout){
$(window).scroll(function(){
if ($(this).scrollTop() > show) {
$(id).fadeIn();
} else {
$(id).fadeOut();
}
});
$(id).click(function(){
$('html, body').animate({scrollTop : limit},timeout);
return false;
});
}
And then use it like this:
scroll(".scrollToTop",160,0,800);
where first parameter is class or id you want to be affected, second is the position of the element at certain height (from top), third is limit (where you want to scroll up) and last one is the duration of the animate function.
EDIT: You may also like to stop on specific px, not only scroll to top, so I changed the function to set the scrollTop position at your desire.
I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/
You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.
You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!
I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/