I have a code which slides to a particular div on page load . I am trying to modify that code . I wish to slide it to particular div on click event of href.
JS Fiddle Link
Javascript
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
HTML
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a href="#"> on click<a/></li>
</ul>
There are two things to note here. If you give your <a> a link to a blank anchor, href="#", it will automatically send you to the top of the page.
So in order to do this, you need to get rid of that.
<a>on click</a>
It will still work if you don't remove the href="#", but it will jump to the top of the page and back before it scrolls, which is unsightly.
The other thing you need to do is bind the event to the <a>
$(document).ready(function () {
// Handler for .ready() called.
$("a").click(function(){
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});
JSFiddle
TRY this. Here I am add a new id for your tag ( recommended ) called on_click_a or you can use $('a) instead of $('#on_click_a')
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a href="#" id='on_click_a'> on click<a/></li>
</ul>
$(document).ready(function () {
// Handler for .ready() called.
$("#on_click_a").click(function(){
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});
Javascript
$(document).ready(function () {
$('#clicky').click(function() {
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
});
HTML
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
<li><a id="clicky" href="#"> on click<a/></li>
</ul>
Related
I am trying to create a good scroll when I click a navigation link and to send me to the specific div. This code in earlier project was working, but in this project I don't know the reason why is bug. I've tried to find a solution without asking a question but it was impossible.
this is the code:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="home-link" class="active">Home</li>
<li id="about-link">About</li>
<li id="project-link">Projekti</li>
<li id="location-link">Lokacioni</li>
<li id="plans-link">Planet</li>
<li id="contact-link">Contact</li>
</ul>
</div>
Here are the DIVS with 100%heights and widths that I want to scroll when I click to links.
$('#home-link').click(function(){
$("html, body").animate({ scrollTop: $('#myCarousel').offset().top }, 500);
});
$('#about-link').click(function(){
$("html, body").animate({ scrollTop: $('#about-us').offset().top }, 500);
});
$('#project-link').click(function(){
$("html, body").animate({ scrollTop: $('#projekti').offset().top }, 500);
});
$('#plans-link').click(function(){
$("html, body").animate({ scrollTop: $('#planet').offset().top }, 500);
});
$('#location-link').click(function(){
$("html, body").animate({ scrollTop: $('#location').offset().top }, 500);
});
$('#contact-link').click(function(){
$("html, body").animate({ scrollTop: $('#kontakti').offset().top }, 500);
});
I found the mistake that I did in code, the part of the jquery code was in a function and that caused the problem. So I just put in beginning of code, right above of
$(document).ready(functioN(){
});
and now work completely fine. Admin can close or delete this question.
I have a very long HTML page with content. What I am trying to achieve is when someone clicks a menu item in the header, the page should scroll down to an anchor element. I have try many things with no luck. I don't know JavaScript. This is what I tried:
_header.html.erb
<div class="header_pad">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>The Investors' Club</h1>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a id="result" href="#contact">Contact</a></li>
</ul>
</section>
</nav>
</div>
application.js
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#result").click(function() {
scrollToAnchor('contact');
});
index.html.erb
<div id="contact">
<%= image_tag("contact_us.png", :alt => "Forex Investment Contact") %></br>
<p class="small-11 small-centered columns">
Skype is free and more convenient, give us a call or send us an email if you happen to have some questions. We will
be glad to hear from you.
</br>
<%= image_tag("skype.png", :alt => "skype") %> OR
<b>100forexinvestors#gmail.com</b>
</p>
</div>
Live page: https://infinite-oasis-2303.herokuapp.com
So I want it that when I click "Contact" in the header, it scrolls smoothly all the way down to the Contact anchor down below the page. Any help?
EDIT:
I got it to work with the js I posted as an answer. However. If I click on the back button and click another link, the animation doesn't work anymore till I reload the page. Looks like the javascript loads just once. How do I eliminate that?
Seems you have typo <a name"test"></a>. Try change it to <a name="test"></a>
EDIT
Since the question edited, this is the example for application.js:
$(document).ready(function() {
$('.top-bar-section a').click(function(e) {
e.stopPropagation();
var eid = $(this).attr('href');
var top = $(eid).offset().top;
$('html, body').animate({ scrollTop: top }, 'slow');
});
});
Make sure the anchor href and target id is equal. E.g: <a href="#contact"> for <div id="contact">
this might help,
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},500);
Pass "time" as the second argument to the animate function. It should navigate to the target location in that much amount of "time". Thus helping smooth transition.
OK. I got it to work with this piece of js:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
});
I am using jquery.scrollTo.js to scroll to blocks in one page onclick.
Html Code:
<ul>
<li>About</li>
<li>Products</li>
</ul>
<div id="about" class="item">
<a name="about"></a>
About content
</div>
<div id="product" class="item">
<a name="product"></a>
Products content
</div>
Internal Script:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
Please refer http://jsfiddle.net/8up4A/ to just view the code in jquery.scrollTo.js . I am trying to show the id name along with the url like http://www.test.com/index.html#about.
If i removed return false in internal script the id displays in url but the scrolling not working correctly. How to achieve this without affecting the scrolling effect. Any Help? Thanks.
$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
var currentString = $(this).attr('href');
var newString = currentString.substr(1);
$("html,body").animate({
scrollTop: $('a[name="'+newString+'"]').offset().top
}, 2000);
});
});
And you can remove the scrollTo.js plugin, you don't need it.
I have been trying to set the scroll of my page to a certain div. Kindly let me know how can i do that. Following is my code in which each each option in li moves to certain div . I tried this $("#header3").click(); in doucument.ready function but it didnot work.
Kindly help!
<ul id="navigation">
<LI><A class="home selected-lice"href="#header">Home</A></LI>
<LI>Partners</LI>
<LI><A class="about" href="#header5">About Us</A></LI>
<LI><A class="contact" href="#header6">Contact Us</A></LI>
</ul><!-- end of #navigation -->
Alternatively you can use this to scroll to specific element on page load with animation:
$(function(){
$('html, body').animate({ scrollTop: $("#header1").offset().top });
});
check this link:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
or try to overwrite the usual anchor behavior with some scrolling. Like this:
$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});
HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.
$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.
Use class instead of id. Select elements using class.
Also you can use .each() method
You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );