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>
Related
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
});
I've got a problem with my Laravel site.
It doesn't load any JS. The Collapse of my navbar and the auto-scroll function don't work at all. It's like it doesn't load the JS at all. But I don't get any errors and the hyperlinks are fine. I can load the files in my Browser without any problem. Only the functionality doesn't work.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
#include('layouts.nav')
</nav>
the Navbar file
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dr. Geiger</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>Öffnungszeiten</li>
<li>Unsere Schwerpunkte</li>
<li>Unsere Arztpraxis</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
And the smoothscroll.js file
$(document).ready(function() {
// Add scrollspy to <body>
$('body').scrollspy({
target: ".navbar",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("#navbar-collapse-main a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I am unable to get the height of my navigation.
Attempt #1:
$("#process-link").click(function() {
$('html, body, #project-container').animate({
scrollTop: $("#process-work").offset().top
}, 2000 + $("nav#primary").height());
});
Attempt #2:
var headerHeight = $("nav#primary").height();
$.address.change(function(evt) {
var target = "#" + evt["pathNames"][0]; //Get the target from the event data
// If there's been some content requested go to it…else go to the top
if(evt["pathNames"][0]) {
var scrollToPosition = $(target).offset().top - headerHeight;
$('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600);
} else {
$('html, body, #project-container').animate({ 'scrollTop': '0' }, 600);
}
return false;
});
Attempt #3
$(function() {
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $( "#process-work" ).offset().top + $('nav#primary').height()
}, 2000);
return false;
});
});
HTML
<nav id="primary">Content</nav>
<div id="arrow-nav" class="container-full clearfix">Content</div>
<div id="project">
<div id="project-container">
<div class="container">
<section>
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a>
<div class="row">
<div id="process-work">
<div class="col-6 fixme">
<h2 id="process-title">Process Work</h2>
<p id="process-description"></p>
</div>
<div class="col-6">
<div id="process-wireframes" class="owl-theme owl-carousel"></div>
</div>
</div><!-- end process-work-->
</div>
</section>
</div>
</div><!-- end project container -->
</div><!--closes project-->
I'm trying to make it so once #process-link is clicked it slides you to #process-work and calculates the height of nav#primary and #arrow-nav and offsets accordingly.
This javascript currently achieved what I wanted to do. I grouped all div elements into one called #project-content and calculated the height of that plus the nav. Because the page is fixed it was causing issues.
HTML
<div id="project-content">
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<div style="background:#919191" class="hr"></div>
<a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a>
<a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a>
<div id="project-tag"></div>
<div id="project-images"></div>
</div><!--end project content-->
Javascript
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30
}, 2000);
return false;
});
Look at the OP to see the divs that also exist in the document and what I am calculating. #project-container has padding-top:60px; which I think also affected the offset, which is why I added 30.
I use this script for scrollspy offset height in my bootstrap theme. This code doesnt work properly in firefox and the heght offset aint operate, this works on chrome.
var offsetHeight = 120;
$("#p-menu a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top-offsetHeight}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
HTML:
<ul class="nav nav-tabs bg" role="tablist" id="p-menu">
<div class="container">
<i id="info-icon"></i><span>Informations</span>
<i id="details-icon"></i><span>Specifications</span>
<i id="comments-icon"></i><span>Comments</span>
<i id="diagram-icon"></i><span>Diagram</span>
</div>
</ul>
<div class="row bg" id="info" data-spy="scroll" data-target=".navbar-example">
<div class="p_info" id="details">
...
</div>
<div class="p_info" id="comments">
...
</div>
<div class="p_info" id="diagram">
...
</div>
</div>
I had the same Problem and solved it with this
history.pushState(null, null, myHash);
instead of
window.location.hash = myHash;
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!