We Keep Coding

Asp.net Core JQuery scroll to div on page load not working

I have run up against a little problem. I am trying to get the page to scroll to a specific point on page load but I'm not getting anywhere. The code I have used is below. For some reason it doesn't seem to be running at all.
<script type="text/javascript">
// scroll past header on page load
function scrollToDiv() {
$(document).ready(function () {
var ele = $('html, body').animate({ scrollTop: $('#tree').position().top }, 500, 'linear');
});
};
scrollToDiv();
</script>
If you have any suggestions as to why it is not working I would certainly appreciate it.
I am building using ASP.NET Core. The above jQuery code worked on an old webforms project so I have no idea why it isn't working now.

To do this with jQuery:
<script>
$(function(){
const top = $('#tree').position().top;
$('html, body').animate({ scrollTop: top }, 500, 'linear');
});
</script>
However, you don't need jQuery for this:
<script>
window.addEventListener('DOMContentLoaded', () => {
const target = document.getElementById('tree');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
</script>
Window: DOMContentLoaded event - Web APIs | MDN
Element.scrollIntoView() - Web APIs | MDN

.on('click') function not working after updating to jQuery 3.3.1

first of all I'm sorry if this was already answered here, but none of the solutions I saw worked for me.
I'm updating an old website and after updating jQuery to version 3.3.1 my function stopped working and I can't wrap my head arround the problem.
here is my script:
(function(){
$("a").on('click', function(e) {
if (this.hash !== "") {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1500, function(){
window.location.hash = hash;
});
}
});
});
and the order I'm loading my script files:
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
The page jumps to the anchor established instantly. Has there been some function deprecation I've overlooked? It worked fine with 2.2.4.
Thanks in advance for your advice!
EDIT: Removed initial claim that .on() function wasn't being recognized.

Your wrapping function is never invoked
(function(){
//code here
});
It should be
(function(){
//code here
})();
Maybe you meant:
$(function(){
//code here
});
which is a jQuery shorthand for invoking the function when the DOM is ready

If your JavaScript code get execute before DOM ready or there is no anchor tag when your JavaScript get execute.
Try the following code i hope this will work for you.
$('body').on('click','a',function(e){
//IMPLEMENT YOUR LOGIC HERE
});
NOTE:- Make it sure that your JQuery library file include before your JavaScript code

Jquery issue when two functions are used

Hey guys I am new to web design and making a site for the family business.
Both of these jquery functions work when the other isn't present in the code but when both are used the first (scroll to) fails to work.
Scroll to location function:
<script type="text/javascript">
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
</script>
Scroll to new page on user scroll function:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>
any advice would be appreciated thanks

You should call the first block of code inside of the $(document).ready(); call in the second block. Basically you're setting up an event listener (in this case, a button click) on an element (the button) that may not exist yet because the page is still loading. Setting up the listener inside of $(document).ready(); makes it wait until the page is loaded.
Your code should probably look like this:
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 2000);
});
$('#fullpage').fullpage({
sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
css3: true
});
});
</script>

HTML Anchor Points - Wrong Position

This problem has been driving me insane for the last couple of hours.
I have a one-page website design. The anchor links work perfectly fine on the page itself.
But I have a second page that will act as the Blog section.
When I try to use the anchors from here to link back to the sections on the index page, they do not position correctly.
Please see main page:
www.redcedarstudios.ca/themes/Haze/index.html
and then try to click the nav links back from the blog page:
http://www.redcedarstudios.ca/themes/Haze/post.html
The positioning is completely out of whack.
Any help or ideas is greatly appreciated.
Thanks
John

So I found a fix.
I added a $(window).load function that will read the hash tag from the url and scroll to onloading:
$(window).load(function() {
var hash = window.location.hash;
$(document).scrollTop( $(hash).offset().top );
});

If you can't get the above to work try this:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>
It will actually animate to the correct div if it didn't land on it how it should because of assets that needed to load. If you want to remove the animation, I couldn't get the above code to work by itself, but I used my example here combined with the above example:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$(document).scrollTop( $(hash).offset().top );
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>

Jquery link and URL hash

I'm new at jQuery and don't really know what I'm doing. I need some help.
I'm creating a web app. It has a header and footer that I want to stay on every page, so I decided to use jQuery to load a page into the main content div so every time a link is clicked, the whole page isn't reloaded.
Here's what I'm using to accomplish this:
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#main_content").fadeOut('fast');
$("#main_content").load(this.href);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>
And each link:
<a class="ajax-link" id="add" href="add.php"><span class="glyphicon glyphicon-plus-sign" style="margin-top:4px;"></span><div>add</div></a>
This works great EXCEPT the page address. My app uses PHP, and I need to be able to PHP Header to a page like 'index.php#about' that will load the index.php page and display the about.php in the #main_content div.
I tried this:
<script type="text/javascript">
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click');
})
</script>
I can see where the link is selected (box around it), but it doesn't actually click it. I'm not sure why.
Thank you in advance for any help!

I think you could just get the hash, add a php extension and make an ajax call.
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
// Get the hash from the URL and append .php extension
// index.php#about ==> 'about.php'
var page = window.location.hash + ".php";
//Make an ajax call using the page variable.
$("#main_content").fadeOut('fast');
$("#main_content").load(page);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>