I have the following scrollTop function:
<a onclick="jQuery('html,body').animate({scrollTop:0},'slow');return false;" class="well well-sm" href="#">
<i class="uxf-icon uxf-up-open-large"></i><span class="sr-only">${message:backToTop}</span></a>
However, when you use your keyboard to navigate the focus does not go to the top. It remains in the footer. Is there a way to bring the focus to the following div:
<div id="top" tabindex="-1"></div>
The visual focus is different from the keyboard focus, you can use the focus() function to define the keyboard focus
<a onclick="jQuery("#top").focus();return false;" class="well well-sm" href="#">...</a>
This can be used conjointly with your animate function.
Animated scrolling to the top of the element, then setting a focus:
<script>
function scroll() {
$('html, body').animate({
scrollTop: $('#top').offset().top
}, 'slow', function() {
$('#top').focus();
});
}
</script>
<a onclick="scroll(); return false;" class="well well-sm" href="#">...</a>
The problem is that you have assignd a click to it, while enter is a keypress, you have to set it both, here's one way to do it with jQuery delegation:
function animateToTop() {
$('html,body').animate({
scrollTop: $('#top').offset().top
}, 'slow');
}
$('#aSendToTop').on('click keypress',
function (e) {
// mouse 1 has keyCode 1, while enter is keycode 13
if( [1, 13].indexOf(e.which) > -1 ) animateToTop();
}
);
JSFiddle
Related
I have following code and what i am trying to do is when i click the button, content of div should be displayed from the initial of div.I am not good at js.For now when i click the button then div content doesnot shows untill i scroll the page . So how could i make it scroll automatically to the top of div content when i click the button?
//HTML
<button type="button" class="btn btn-info btn-block" id="show"></button>
<div class="container-fluid" id="detail" style="display:none;"></div>
//Js
$(document).ready(function(){
$("#show").click(function(){
$("#detail").fadeIn();
});
});
Try this
$(document).ready(function() {
$("#show").click(function() {
$("#detail").fadeIn();
$('html, body').animate({
scrollTop: $("#detail").offset().top - 100
}, 800);
});
});
You can add an element above the div element.
After then, use this function in the button click event.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
Here is the example.
https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview
You can use jQuery ScrollTo plugin.
http://api.jquery.com/scrollTop/
$('#myButton').click(function() {
//optionally remove the 500 (which is time in milliseconds) of the
//scrolling animation to remove the animation and make it instant
$.scrollTo($('#myDiv'), 500);
});
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 this responsive layout. What I want to achieve is that at "desktop" size, once a menu link is clicked it will navigate to that part of the page. I want the same thing for "mobile" size. Also, once the menu links are clicked, the menu will slideUp.
I have both of these things working, however it only works when the page is reloaded. To summarize, here are the problems:
At desktop size: navigation is fine, but when resized to mobile the menu doesn't show.
At mobile size: navigation works fine, when resized to desktop it also works fine, but the menu keeps on toggling.
I created a jsFiddle for it. Here is my code:
HTML
<div id="head" class="clearfix">
Pull Menu
<div class="menu-wrap clearfix">
<div class="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
<div id="test1" class="section">Test1</div>
<div id="test2" class="section">Test2</div>
<div id="test3" class="section">Test3</div>
JavaScript
var respMenu = function(event) {
var menu = $('.menu-wrap');
if ($(window).width() < 501) {
$("#pull").on('click', function() {
menu.slideToggle('slow');
});
$(".nav ul li a").click(function() {
menu.slideUp('slow');
});
}
else{
}
return false;
event.preventDefault();
};
var onClick = function() {
$('a').bind('click',function(event){
var $anchor = $(this);
if ($(window).width() > 500) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 90 }, 1000,'easeInOutExpo');
}
else{
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50 }, 1000,'easeInOutExpo');
}
event.preventDefault();
});
};
$(window).load(function(){
respMenu();
onClick();
});
$(window).resize(function(){
respMenu();
onClick();
});
The issue is that you bind a new handler to the click event each time your window is re-sized and you never unbind them. So the handlers number keep increasing, which means that multiple events will be fired after a click once you've re-sized the window.
So what you can do is to unbind the handlers using the unbind or off methods.
Take a look here: http://jsfiddle.net/yohanrobert/p987prdd/
I'm using Foundation 4 accordion with deep linking set to true:
<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">
<section class="section">
<h3 class="title"> Program Highlights <span class="arrow_down"></span></h3>
<div class="content" data-slug="panel1">...
Despite Foundation docs saying this should work, this by itself does nothing... so I added:
$(document).foundation('section', {
callback: function (){
var containerPos = $('.active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
}
});
This works, but I wanted the accordion panels to close when clicked again, instead of having to click another panel. So I then add some code to toggle open/close each accordion panel and arrow up/down on click:
$(document).on('click','.accordion h3', function () {
$(this).find('span').toggleClass("arrow_down arrow_up");
$(this).next('div').toggle();
var containerPos = $(this).offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
});
Then only only the foundation callback works, not the toggling. So these both work individually, but when I have both in the script only the foundation callback works. How can I get both of these to work?
You can use data-options="one_up: true;" to collapse the content of you accordion. For example:
<div data-options="one_up: true;" data-section="accordion" class="section-container accordion"></div>
This code works perfectly except when you click on a link, The page is redirected before jquery has a change to visually animate the margin back to zero. Is there a way to prevent the redirect until after jquery animates the margin back to zero?
HTML
<div id="sidebar">
<div class="navigation">
<ul>
<li><img src="dbs/images/home.png" title="" width="40" height="38" />به عقب</li>
<li>فیلم ها</li>
<li>وزارتخانه ها ایران زنده</li>
<li>پرستش</li>
<li>جوانان</li>
<li>کودکان</li>
<li>پزوهش ها</li>
<li>دانشکده مسیح</li>
<li>زنان</li>
<li>کلیپ های سری</li>
</ul>
</div>
</div>
JS
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500);
});
.animate() takes a callback function like so:
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500,function() {
//thing to do when you animation is finished e.g.
location.href = 'http://redirect.to.url';
});
});
For complete documentation, check out the (extremely useful) jQuery docs:
http://api.jquery.com/animate/
Firstly, your HTML is invalid. Put the links inside the list items, not the other way around. Adjust your selector accordingly (.navigation li a).
Next, now that you're setting the event on the link rather than the list item, make your handler:
Prevent the default event
Add a callback to the animation, so that when the animation is over the page goes to this.getAttribute('href').
That should do it.
Stop the event propagation from li click handler.
$('.navigation a li').click(function (e) {
$('.slider').animate({
marginLeft: 0
}, 500);
e.stopPropagation();
});