Using Javascript to scroll to an element automatically when the user scrolls - javascript

I made a website that has 2 sections. You have to scroll a bit to come to section 2 so I wanted to make a code which sends you directly to section 2 when you scroll down.
So I made a basic function that works when I use a button to trigger it but I couldn't figure out how can I make this function run when the user scrolls. The function:
function scroll_to_target(){
document.getElementById("moreinfo").scrollIntoView();
}
Basically I need something that when the user scrolls down in the first section of the website it triggers "scroll_to_target()" function which makes the user scroll to "moreinfo" (second section) of the website directly and smoothly.

i guess you can use jQuery to do that, for the scroll function to hit you could do something like this after importing jQuery to project:
$(window).on("scroll", function() {
//call the function here or make any changes
});

Related

execute function on URL hash change that isn't detected by window.onhashchange

I am using xaringan slides; xaringan is based on remark.js. I want to implement a Javascript function that triggers on every slide change. (The function could be anything; in my case, it scrolls "presenter notes" to the top of their div upon a slide change.)
remark.js slide decks are HTML files. In the URL for the file, each slide is represented by the number after the hash mark: you have "mySlides.html#1", "mySlides.html#2", and so on. So it might seem that I can implement the behavior that I want with window.onhashchange:
function myFunc() {
console.log("Triggered myFunc()!")
}
window.onhashchange = myFunc;
This code works when a user changes slides by using the "back" or "forward" buttons in the browser. It also works when he types the change into the address bar. For example, it works if he sees "mySlides.html#1" in the address bar, deletes the "1", replaces it with a "2", and presses Enter.
But no one changes slides in those ways. Instead, they change slides by swiping on their tablets, scrolling their mouse wheels, or pressing the left- and right-arrow keys. All of these shortcuts change the slide and the hash that appears in the address bar. But none of them trigger window.onhashchange.
Is there a way to execute a function whenever the hash in the URL changes, even when it isn't changed by typing in the address bar or by clicking the "back" button? For example, location.hash changes every time that a user changes from one slide to another -- is there a way to listen for changes to location.hash?
Per charlietfl's comment, remark.js comes with slide-change events that are easy to trigger:
function myFunc() {
console.log("Triggered myFunc()!")
}
slideshow.on('showSlide', myFunc);
is all that one needs to do.

Scrolling to top inside an accordion

In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?
This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

Trying to get this wordpress theme to scroll to an id when a link is clicked on a different page

Easiest way to explain it is if you have a look at the site - haloespresso.com.au/working/
If you click the "menu" option in the top menu, it scrolls to the menu id #pg-9-4, which is what I want. On the other pages, the menu is slightly different and the same link is changed to link to the home page with #pg-9-4 added to the end of it. The point here is clearly to get the link from another page to open the home page but scroll to the menu part of it. I don't even need it to smooth scroll or anything, just go to that spot. It looks like it does go there for like, one frame, as it's loading, but it keeps jumping to the top. It's simply beyond me to try and figure out what is causing it to lose this basic HTML (afaik) functionality and keep forcing me to the top of the page...
Any help would be really great, as I'm a bit of a noob when it comes to anything other than html/css and simple jquery.
Just append the anchor to the end of the link.
Simply insert a link like:
Link to section on another page
Edit: Just noticed you're not getting this to work. What do your links look like, and what's the HTML with the ID on the target page?
Try this jQuery code:
$(document).ready(function() {
function hashScroll() {
// get URL Hash
var hash = window.location.hash;
// check if hash is set and not empty
if (hash != '') {
// scroll to hash ID after 10ms delay
setTimeout(function() {
$(document).scrollTop( $(hash).offset().top );
}, 10);
// debugging
console.log(hash);
console.log('offset:'+ $(hash).offset().top );
}
}
hashScroll(); // fire hash scroll function
});
Explanation:
This function will capture the URL hash (www.example.com/#hash), checks if it's not empty and then scrolls the page to the element with the ID which matches the hash after 10 ms. The delay is there to make sure browsers don't mess up the loading process.

How can I check if a user has grabbed a scrollbar on a website?

Basically I want to see if a user has a hold of a scrollbar on my site. is there a Jquery function I can use to return a Boolean based on weather the user has a hold of the scrollbar or not?
Edit: adding my site so you can see the problem. When you try to scroll the scrollbar up the timed event to set the scrollbar to the bottom kicks in and sends it to the bottom. I need it to not do that while focus is on the chatbox/chatbox scrollbar, but it's not working: http://exvs.us/
If you really need to accomplish this, one way would be to hide the default scrollbar and create your own in javascript. You can then handle click events on your scrollbar. However, this won't work well for users that have javascript disabled by default.
Use scroll method of the Jquery object :
more information there => http://api.jquery.com/scroll/
sample :
$(window).scroll( function () {
console.log('pretty easy no ?');
});

Simple jQuery fade-in when document loads / no user interaction should be required

Platform: ASP.NET 3.5, ASP.NET Ajax intermixed
I'm very green to jQuery, so have been having a hard time with what I assume to be trivial.
All I need to do is create the following scenario
user logs in to my site, and I take him/her to a 'dashboard'
I want a nice little bar to 'fade in' with some information I want to draw his/her attention to
The examples on jQuery seem to suggest I need to click something to make it happen - but I don't want any user interaction. User logs in, user sees a nice fadein info bar. That's it.
I saw a few examples and can't get it to work and I have tried both the following:
(1)
$(document).ready(function () {
$("#fadein").fadein("slow");
});
(2)
$("#fadein").bind("load", function () { $(this).fadeIn(); });
My div is as follows
<div id="fadein" style="display:none;">this will fade in now yeah</div>
(PS - I have tried with display:none and without it. Made no difference)
What am I missing? What am I doing wrong? Just in case it helps
I moved the from the contentpage to the masterpage, made no difference
Any help appreciated.
The first should work, just fix the function name which is .fadeIn() instead of .fadein():
$('#fadein').fadeIn('slow');
^

Categories