Develop Reference

scroll to next div by js

I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});

Jquery smooth scroll with mousewheel effect

When my page first loads, I have a fullscreen jumbotron. When the user goes to scroll down with the mousewheel I want to use the Jquery animate effect to bring the navbar (underneath the jumbotron) to the top of the page.
I already have a button that can achieve this but I would like to do it with the mousewheel too.
How can i achieve this?
Thank you
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</div>
</nav>
Jquery:
$(document).ready(function() {
$('#btnToNav').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
});

You can use
mousewheel OR DOMMouseScroll
If you want to run that function in Firefox as well, you should use both of them, since Firefox doesn't have mousewheel, but they have DOMMouseScroll
$(document).ready(function() {
$('#btnToNav').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#mainNavbar").offset().top
}, 1000);
});
$('html, body').on('mousewheel', function(e){
e.preventDefault();
var delta = event.wheelDelta;
if(delta < 0){
// scroll from top to bottom
$('html, body').animate({
scrollTop: $("#brand").offset().top
}, 1000);
}else{
// scroll from bottom to top
$('html, body').animate({
scrollTop: $("#btnToNav").offset().top
}, 1000);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Jumobtron-->
<div class="jumbotron" style="height: 100vh;">
<a href="#mainNavbar">
<button type="button" class="btn" id="btnToNav">To Navbar</button>
</a>
</div>
<!-- Navbar -->
<nav class="navbar sticky-top" id="mainNavbar">
<div class="container">
<a id="brand" asp-controller="Home" asp-action="Index" class="navbar-brand"> Brand </a>
</div>
</nav>

load() specific href after clicking a element

Currently I have this JS code:
$('.tile').on('click', function() {
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
}, 2000);
});
I also have some HTML <a> which are buttons and they are all called tile
I want to load the specific href defined in the <a> as seen here with two of them:
<a class="tile double bg-tile7color animated seven flipInX" data-click="transform">
<div class="tile-content image">
<div class="padding10">
<h2 class="fg-white ntm">Cost</h2>
<p class="fg-white ntm">Pricing and Proposals</p>
</div>
<div class="brand">
<div class="label"></div>
</div>
</div>
</a>
<a class="tile bg-tile8color animated eight flipInX" data-click="transform">
<div class="tile-content icon">
<span>
<img src="images/mthc/referrals.png">
</span>
</div>
<div class="brand">
<div class="text-center padding10 ntp">
<p class="fg-white">Referrals</p></div>
</div>
</a>
How do I change the JS to load whatever they have in their href's and not what is currently specified in the .load() part of the function? Currently it's loading company-overview.html. While that is the case I will also need to make the color changes unique to the buttons so is there any way to integrate this change into the s ?

Simply replace load("company-overview.html") with .load($(this).attr('href') to reference the href attribute of the current/target .tile being clicked:
$('.tile').on('click', function(e) {
e.preventDefault(); // stop the default link click behavior
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).attr('href'));
}, 2000);
});

You can use the this keyword in the click handler to refer to the clicked element. From that you can retrieve the href attribute:
$('.tile').on('click', function(e) {
e.preventDefault();
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson, .metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).prop('href'));
}, 2000);
});

Jquery Smooth Scroll To DIV - Using ID value from Link

So i'm having some issues with my JQuery which is suppose to scroll to particular divs.
HTML
<div id="searchbycharacter">
<a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a>
<a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a>
<a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a>
<a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a>
... Untill Z
</div>
<div id="0-9">
<p>some content</p>
</div>
<div id="A">
<p>some content</p>
</div>
<div id="B">
<p>some content</p>
</div>
<div id="C">
<p>some content</p>
</div>
... Untill Z
JQuery
What i want the code to do is: On click event of an .searchbychar A TAG > Take the ID attributes value and scroll to that...
$( '.searchbychar' ).click(function() {
$('html, body').animate({
scrollTop: $('.searchbychar').attr('id').offset().top
}, 2000);
});

Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric">0-9 |</a>
<a class="searchbychar" href="#" data-target="A"> A |</a>
<a class="searchbychar" href="#" data-target="B"> B |</a>
<a class="searchbychar" href="#" data-target="C"> C |</a>
... Untill Z
</div>
As for the jquery :
$(document).on('click','.searchbychar', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});

You can do this:
$('.searchbychar').click(function () {
var divID = '#' + this.id;
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 2000);
});
F.Y.I.
You need to prefix a class name with a . (dot) like in your first line of code.
$( 'searchbychar' ).click(function() {
Also, your code $('.searchbychar').attr('id') will return a string ID not a jQuery object. Hence, you can not apply .offset() method to it.

Here is my solution:
<!-- jquery smooth scroll to id's -->
<script>
$(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
}, 500);
return false;
}
}
});
});
</script>
With just this snippet you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.
I already explained how it works in another thread here: https://stackoverflow.com/a/28631803/4566435 (or here's a direct link to my blog post)
For clarifications, let me know. Hope it helps!

How to make jQuery slidetoggle effect for multiple div on same page?

it works fine for one div
(function($) {
$(document).ready(function(){
$('#div1').hide();
$('a.plus').click(function(){
$('#div1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
How to make this slide toogle effect for multiple div on same page? I have multiple divs with different id to hide like #div1, #div2, div#3.
edit:
This is situation in html
<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>

(function($) {
$(document).ready(function(){
$('#div1, #div2, #div3').hide();
$('a.plus').click(function(){
$(this).next().slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);

Presuming your HTML is something like this:
<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>
Then having a function like this will work for as many a.plus / div pairs you have:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
$(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
If your a.mores are, for whatever reason, nowhere near the divs themselves, you will have to set an attribute on the a.more to link it to a div, eg. (HTML)
<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>
... some more HTML
<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>
and Javascript:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
var id = 'div' + $(this).attr('data-article');
$('div#' + id).slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);

Give your divs the same class (like 'div_to_toggle') and then instead of $('#div1'), $('#div2'), ... you can use one selector: $('.div_to_toggle') that will select them all:
$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();