We Keep Coding

jquery .animate scrollTop function not working

I'm trying to learn animated scrolling with jQuery on a portfolio website. I think this should work in theory but my buttons still just 'jumps' to its href instead of scrolling.
The javascript is enclosed in the $(document).ready(function() {}) thing:
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
I'm hoping that this would scroll to my section with those ids instead of jumping.

Use preventDefault() to stop default ahref action first and it should be fine
// added e parameter to click callback
$('a[href*="#"]:not([href="#"])').click(function(e) {
// use prevent default function
e.preventDefault()
var target = $(this.hash);
if (target.length) {
$('html, body').animate({scrollTop: target.offset().top}, 1000);
}
});`
You are activating default action of the <a> tag so browser have no time to animate scroll because you are there already.

You can try following.
$('a[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
if (target.length) {
$('html, body').animate({scrollTop: $(target).offset().top}, 1000);
}
});

Href tag not working in chrome but working in other browser

I'm working on designing website but facing a issue that href # tags are not working in chrome but working in firefox
<ul class="navigation" style="margin-top: 75px;">
<li><a class="scroll-to" href="#section-1">Home</a></li>
<li><a class="scroll-to" href="#section-2">About Us</a></li>
<li><a class="scroll-to" href="#section-4">Products</a></li>
<li><a class="scroll-to" href="#section-5">Clients</a></li>
<li><a class="scroll-to" href="#section-6">Team</a></li>
<li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>
<section id="section-1" class="banner-container color-light center nav-trigger">
I am not sure where its going wrong

The following works fine for me in Chrome 62. Are you closing your section tag? Are you sure there is enough height that it would actually scroll?
section {
padding: 100px;
border: 1px solid blue;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section id="section-1">Home</section>
<section id="section-2">About Us</section>
<section id="section-4">Products</section>
<section id="section-5">Clients</section>
<section id="section-6">Team</section>
<section id="section-7">Contact Us</section>

You can try follow this.
https://www.gregoryvarghese.com/chrome-anchor-link-not-working-fix/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Make sure you have enough height for each div so that page can scroll. Without page scroll you can't see changes, because nothing wrong with your code.
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>

I guess its a bug in certain versions of Chrome, this workaround did the trick for me, good luck! -
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});

For me, it was the href that redirected to pages with hashtags, so I did this workaround:
$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
e.preventDefault();
window.location.href = $(this).attr('href');
window.location.reload();
return false;
}
});

Adding HTML children and parent tabs to active class using javascript

I have this fly-out mene. This is the HTML:
<ul class="nav">
<li class="tab"><a class="active" href='#sw_operations'>Software Operations</a></li>
<li class="tab"><a href='#software'>Software</a></li>
<li class="tab"><a href='#fac_staff'>Fac/Staff Members</a></li>
<li class="tab"><a href='#vendor'>Vendors</a></li>
<li class="tab"><a href='#admin'>Admin</a>
<ul>
<li><a href='#users'><span>Users</span></a></li>
<li><a href='#variables'><span>Variables</span></a></li>
<li><a href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
</ul>
And this is the JS:
$('.tab a').on('click', function (e) {
e.preventDefault();
$(".tab a").removeClass('active');
$(".tab a").parent().removeClass('active');
$(this).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
What I am struggling with is, when the user hits one of the 3 children tabs, I want it to add that specific child tab to active class as well as it's parent. I have a CSS part for the tab being active.
How do I add the parent tab in addition to the child tab to active class in JS?
Thanks :)

Something like that :
<li class="tab"><a id='admin' href='#admin'>Admin</a>
<ul>
<li><a href='#users' data-parent-id='admin'><span>Users</span></a></li>
<li><a href='#variables' data-parent-id='admin'><span>Variables</span></a></li>
<li><a href='#Reports' data-parent-id='admin'><span>Reports</span></a></li>
</ul>
$('.tab a').on('click', function (e) {
e.preventDefault(enter code here);
$(".tab a").removeClass('active');
$(this).addClass('active');
$(".tab #"+$(this).attr('data-parent-id')).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});

I would do it like this but there are several ways how to do this...
Firstly you add a child class to all of your <li> elements. Then you add an id of 'Admin' for example to your admin <li>.
Now in jQuery you can check if the element on which you pressed is of class child or not. If it is true then you can add the class of active to your Admin <li>.
Code:
<li class="tab" id="Admin"><a href='#admin'>Admin</a>
<ul id="Children">
<li><a class="child" href='#users'><span>Users</span></a></li>
<li><a class="child" href='#variables'><span>Variables</span></a></li>
<li><a class="child" href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
jQuery Code:
$('.tab a').on('click', function (e) {
if($(this).hasClass("child") == true) {
$("#Admin").addClass('active');
}
});
You just have to append the if statement to your code, I didn't include your code.

Close all open ul when another ul is toggled by click event

I've got a vertical dropdown menu for which I'm using jQuery toggle to open/close the submenus.
It's working fine when the user clicks the parent item (for example 'About' the submenu opens and when they click it again the submenu closes again. However, if they don't click the parent item ('About') a second time to close it but click on a different parent item (let's say 'Industry') to open the submenu both submenus ('About' and 'Industry') are visble.
So I need it to work that 'About' automatically closes when 'Industry' is clicked.
Here is the code :
<nav>
<ul id="nav-list">
<li class="nav-list_item nav-about>About
<div id="about-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
And the JavaScript:
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
I've tried different things I found on stackoverflow already but could'nt get it to work. Any suggestions?

$('#nav-list li').on('click', function() {
$('#nav-list li').not(this).find('div').hide();
$(this).find('div').toggle();
});
.nav-list_item > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
<li class="nav-list_item nav-about">About
<div id="about-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
No need for so convoluted handlers.

demo
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
Just hide the other div when one is click.

I think you can remove redundant code like this:
$('li.nav-list_item').click(function () {
$('li.nav-list_item').find('ul').hide();
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
You can substitute your js with this.

Left animation on click li

I have a menu structure:
<ul id="creamenu" class="menuHolder">
<li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
<li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
<li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
</ul>
<ul id="mainmenu" class="menuHolder">
<li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
<li><a id="about2-menu" href="#/haberler">about 2</a></li>
<li><a id="about3-menu" href="#/galeri">about 3</a></li>
<li><a id="about4-menu" href="#/referanslar">about 4</a></li>
<li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>
I have a content structure in same HTML file:
<div id='news-1'>
<!-- content -->
<!-- content -->
</div>
<div id='news-2'>
<!-- content -->
<!-- content -->
</div>
I want, when i click a item e.g. creamenu item, go to div. E.G.
click news-1 item, go to news-1 div. Like this: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241
Is it possible it with pure jQuery?

It's absolutely possible. Try this:
$('#creamenu a').click(function(e) {
var splitId = $(this).attr('id').split('-'),
contentId = splitId[0] + '-' + splitId[1];
e.preventDefault();
$('html, body').animate({
scrollTop: $('#' + contentId).offset().top
}, 'slow');
});
Using this specific approach, you will need to ensure that the id of your link in the #creamenu is prefaced with the id of its corresponding content (as you are doing now).
It would also be more robust to just put the id of your content in the href of the #creamenu link. That way, if the user doesn't have JS active, it would still jump to the content, albeit without an animation. For example:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
Then, your JS would be as follows:
$('#creamenu a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 'slow');
});

<li><a id="news-1-menu" href="#news-1">news 1</a></li>
With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

You can, but you need some minor changes to your code.
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('href') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And change link structure, so href is and id of an element you would like to scroll to.
You could also make a links looks like this:
<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>
And use rel atribute to find an element, You would like to scroll to:
$('#creamenu li a').click(function(event){
event.preventDefault();
$position = $( $(this).attr('rel') ).offset().top;
$('html, body').animate({scrollTop:$position}, 'fast');
});
And if you are looking for a parallax effect: http://jessandruss.us/, checkout tutorial here: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/ or here: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

Yes, just change your href attributes to the ID of the element:
<li><a id="news-1-menu" href="#news-1">news 1</a></li>
To scroll smoothly, try:
$('a[href^=#]').on('click',function(e) {
e.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('html,body').animate({'scrollTop':top}, function() {
window.location = id;
});
});