I am trying to get my code to scroll so that when the user clicks on the nav links it scrolls to that section in particular. I can't figure out what line of code is wrong because when I click it does take me to the section it just doesn't scroll.
$('.scroll-to').on('click', function(e) {
e.preventDefault();
var thisTarget = $(this).attr('href');
var targetOffset = $(thisTarget).offset().top;
$('html, body').animate({
scrollTop: targetOffset
}, 600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navigation">
<section>
<div class="navlinks">
about
skills
work
youtube
recommendations
contact
</div>
</section>
</nav>
Your above code works as expected; there can only be two things that are possibly wrong:
You have not included jQuery
You do not have an element with an ID corresponding to the target
Also note that an element cannot start with an ID, so your 3skills element will never be able to scroll. I assume this was simply a typo for the hash, so I've changed it to #skills.
Adding the links and ensuring that they don't start with numbers produces a working example, as is seen below:
$('.scroll-to').on('click', function(e) {
e.preventDefault();
var thisTarget = $(this).attr('href');
var targetOffset = $(thisTarget).offset().top;
$('html, body').animate({
scrollTop: targetOffset
}, 600);
});
#about {
margin-top: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navlinks">
about
skills
work
youtube
recommendations
contact
</div>
<div id="about">Lorem ipsum</div>
<div id="skills">Lorem ipsum</div>
<div id="work">Lorem ipsum</div>
<div id="youtube">Lorem ipsum</div>
<div id="recommendation">Lorem ipsum</div>
<div id="contactform">Lorem ipsum</div>
Hope this helps!
Related
I know this question has been answered but the scenario of my question is quite different, so I will try to explain it. If anyone wants more explanation I would love to give it.
I have a filter bar that consists of 8 boxes.
<div class="filter-box filter-box--green px-2 pt-3 pb-4" data-box-id="web-dev">
<img width="60" height="60" src="{!! asset('images/Service-page/Web Development-hover.svg') !!}" alt="Web Dev" />
<div class="title text-center mt-2 pb-4">
Web<br />Development
</div>
<div class="arrow">
<img src="{!! asset('images/Service-page/Green.svg') !!}">
</div>
</div>
When I am clicking on the box, it scrolls to the specific div based on the data-box-id
Below is the JavaScript code that scrolls to the particular div.
<script type="text/javascript">
$(document).ready(function() {
$('.filter-box').on('click', function(e) {
// console.log(window.scroll)
var boxId = $(this).attr('data-box-id');
$('html, body').animate({
scrollTop: $("#" + boxId).offset().top
}, 'slow');
});
})
</script>
Here I used offset. The problem is that sometimes, the cursor is not at target. What I want to achieve is that when I click anywhere on the filter box, it should scroll and my cursor position should be on the expected div.
Use Jquery .animate to have a smooth scroll to the desired element see the example.
$( "#notelement" ).click(function() {
$('html, body').animate({
scrollTop: ($('#element').offset().top)
},500);
});
#notelement{
margin-bottom:800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notelement">Other element</div>
<div id="element">Scroll to element</div>
I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:
/* JS */
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
/* HTML */
<div id="anchor></div>
Scroll to anchor
However, wrapping the summary or details itself in the a tag will disable this scrolling effect.
/* HTML */
<div id="anchor">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?
Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.
$('details').attr('open', true);
If you want to close it use:
$('details').attr('open', false);
In your code better use this selector:
$(target + ' details').attr('open', true);
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$(target + ' details').attr('open', true);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function() {
window.location.hash = target;
});
});
});
#divide {
height: 500px;
}
body {
padding-bottom: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<div id="divide"></div>
<div id="anchor1">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor2">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor3">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor4">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
I want my #logo-page div to move smoothly to #content div on scroll and also when clicked on FontAwesome icon. How do I do that using jQuery?
<div class="english-container" id="logo-page">
<div class="title">
<h1>Mean Design.</h1>
<img class="img-responsive" id="logo" src="MeanDesignLogo.png">
<h3>ui/ux • web design • graphic design • illustration</h3>
</div> <!-- title -->
<i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="english-container" ></div>
I found a trick on how to do that at this page:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Here are two demos:
https://css-tricks.com/examples/SmoothPageScroll/
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
This is the example of the second demo:
$(document).ready(function(){
// Add smooth scrolling to all links
$("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
});
});
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Click Me to Smooth Scroll to Section 2 Below
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
You guys completely ignored his question. His question was he wants to scroll from one div to another div when on scroll not on click.
window.addEventListener('scroll', () => {
document.querySelector('#mission').scrollIntoView({
behavior: 'smooth'
});
})
This will help if you want to scroll to the div with the id name "mission"
You can use following code for scrolling smoothly to #logo-page div on click of .fa-arrow-circle-down:
$(".fa-arrow-circle-down").on("click", function(e){
$("html, body").animate({'scrollTop': $("#logo-page").offset().top }, 1000 );
});//click
I have a section I am wanting to be hidden on page load and only show if a tab is selected or if a person is coming from a link.
I have figured out what is causing my issue. It is that I am showing the section - service-display-box when someone comes from the link.
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
})
I thought of a way to get the page to load without showing the section, but now the section does not appear when coming from a link.
This is what I did:
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
if (sectionName > 1) { //added
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
} else { //added
$('#service-display-box').hide(); //added
} //added
})
How do I make this show only if someone comes from a link instead of on normal page load?
Click on any of the links and when you get to the new page you will see that the service-display-box does not display what-so-ever (this is due to my updated code from above - with the if statement). I am wanting to show the section when coming from the specific links otherwise I want the section to remain hidden unless one of the tabs is selected.
Please let me know if you have any questions.
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">DEMOLITION</div>
</div>
<div class="service-item-box" id="service2">
<div class="service-item-title">ENVIRONMENTAL SOLUTIONS</div>
</div>
<div class="service-item-box" id="service3">
<div class="service-item-title">CONCRETE CRUSHING</div>
</div>
<div class="service-item-box" id="service4">
<div class="service-item-title">ASSET RECOVERY</div>
</div>
<div class="service-item-box" id="service5">
<div class="service-item-title">SCRAP METAL RECYCLING</div>
</div>
<div class="service-item-box" id="service6">
<div class="service-item-title">FOUNDATION REMOVAL</div>
</div>
<div id="service-top">Back to all services</div>
</div>
</div>
#service-display-box {
margin: 50px 0;
display: none;
}
//For tabs to stay active
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple" , "color" : "#000"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);
$('#service'+item_number).show().siblings().hide();
$('#service-top').show();
});
//To go back up to Service options
$("#service-top").click(function() {
$('html, body').animate({
scrollTop: $("#service-tabs").offset().top
}, 1000);
});
//Showing Service Section from Link
$(function(){
//get the section name from hash
var sectionName = window.location.hash.slice(1);
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
})
I have read similar questions and researched scrollspy, but I don't believe it will do quite what I'm looking for, since as far as I can tell it can only use bootstrap style highlighting. (If it can do more please let me know!)
I have a 4-tab navbar (usually fixed top) and a single-page site. Each tab corresponds to a different section of the page, and each section has a different background color. What I'd like to do is change the tab color to be the same as the corresponding section's background color whenever that region is scrolled to (so it will only change color once the new section's top reaches the navbar's bottom.) I have achieved this effect only when the tab is clicked, triggering a scroll event and adding an active class, however the active tab will then remain if clicking is not used, creating the problem.
Is there a way to change a variable based off the current scroll location? I have tried what I can think of but it hasn't worked yet.
JS
$(window).on('scroll', function () {
if ($(window).scrollTop() >= $('#homeContainer').height()) {
$('.menuDiv').addClass('fixed');
} else {
$('.menuDiv').removeClass('fixed');
}
});
$("#menuHomeButton").click(function(e){
$('html, body').animate({
scrollTop: $('#homeContainer').offset().top
}, 'slow');
});
$("#menuAboutButton").click(function(e){
$('html, body').animate({
scrollTop: $('#aboutContainer').offset().top + 1
}, 'slow');
});
$("#menuPortfolioButton").click(function(e){
$('html, body').animate({
scrollTop: $('#portfolioContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
$("#menuContactButton").click(function(e){
$('html, body').animate({
scrollTop: $('#contactContainer').offset().top - $('.menuDiv').height() + 1
}, 'slow');
});
HTML
<div class="mainContainer">
<div class="container blue" id="homeContainer">
</div>
<div class="menuDiv"><!--
--><div class="menuItem" id="menuHomeButton" ng-class="{'active':selectedTab === 'home'}" ng-click="selectedTab = 'home'">
<div class="menuTextDiv"><p>Home</p></div><div class="menuItemColor blue"></div>
</div><!--
--><div class="menuItem" id="menuAboutButton" ng-class="{'active2':selectedTab === 'about'}" ng-click="selectedTab = 'about'">
<div class="menuTextDiv"><p>About</p></div><div class="menuItemColor blue2"></div>
</div><!--
--><div class="menuItem" id="menuPortfolioButton" ng-class="{'active3':selectedTab === 'portfolio'}" ng-click="selectedTab = 'portfolio'">
<div class="menuTextDiv"><p>Portfolio</p></div><div class="menuItemColor blue3"></div>
</div><!--
--><div class="menuItem" id="menuContactButton" ng-class="{'active4':selectedTab === 'contact'}" ng-click="selectedTab = 'contact'">
<div class="menuTextDiv"><p>Contact</p></div><div class="menuItemColor blue4"></div>
</div><!--
--></div>
<div class="container blue2" id="aboutContainer">
</div>
<div class="container blue3" id="portfolioContainer">
</div>
<div class="container blue4" id="contactContainer">
</div>
<div class="container">
</div>
</div>
Here is a fiddle, but for some reason I couldn't get the ng-click and ng-class to work on it, which changes the tab color.
Here are some images of what it looks like not on js fiddle:
What I want and have:
http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png
http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png
What I don't want but still also have:http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png
If anyone has a solution I'd be extremely greatful! Thank you!
Get the distance of the div from top:
distance = $("div").scrollTop()
note: do not use var when declaring distance because than you can't access it inside a function
Then check if div has reached the top and add class:
$(window).on('scroll', function () {
if(distance - $("div").scrollTop() >= distance ){
//do something
}
});