i have code like this:
JavaScript
$( document ).ready(function() {
$("a.link1").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link1").offset().top
}, 2000);
//});
});
$("a.link2").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link2").offset().top
}, 2000);
//});
});
$("a.link3").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link3").offset().top
}, 2000);
//});
});
});
Body of HTML:
<div id="menu">
LINK 1
LINK 2
LINK 3
</div>
<div id="content">
<a name="link1" id="link1"></a>
<!--some text-->
<a name="link2" id="link2"></a>
<!--some text-->
<a name="link3" id="link3"></a>
<!--some text-->
</div>
Please help me with this:
Stop doesn't seem to work the way I wanted. I want to somehow stop previous rolling when another link is activated.
Is there any way of generalization of the jQuery part. I have more than 3 menu links and I don't want to make a special function for each.
Thank you very much for your help.
Gomi
You can generalize by extracting the click callbacks to a common function:
var linkClickCallback = function(selector){
$('html, body').stop().animate({
scrollTop: $(selector).offset().top
}, 2000);
}
$( document ).ready(function() {
$("a.link1").click(linkClickCallback.bind(null, '#link1'));
$("a.link2").click(linkClickCallback.bind(null, '#link2'));
$("a.link3").click(linkClickCallback.bind(null, '#link3'));
});
Note that in the linkClickCallback i also wrote the proper use of stop() method.
EDIT:
This will work for all items in menu:
$( document ).ready(function() {
$("#menu a").click(function(e){
e.preventDefault();
linkClickCallback('#' + this.className);
});
});
with the same linkClickCallback function.
Yeah just generalise a function like this and then inside the function, look for the caller (this):
$("#menu a").click(function(e){
var t = $(this)
$('html, body').animate({
scrollTop: t.offset().top
}, 2000);
});
Related
I'm using the following Jquery to smooth scroll between the anchor links on my page. I have one link that I would like this not to target - is there a way to edit the code to target all but one anchor link?
I have copied the link below also.
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
This is the link I do not want to be called:
Ok
These are links I do want to call with the function:
<li class="key-details">Key Information</li>
<li class="about">About the Service</li>
<li class="health">Health Experience</li>
Solution 1:
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
if($(this).hasClass('wp-default')) return;// with this line of code you'll prevent to call function on "OK" anchor
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Solution 2:
Or you can modify your code in this way:
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]:not(".wp-default")', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Solution 3:
Another approach is using other properties for href:
Ok
javascript:void(0); will prevent any js function to be called by this anchor.
P.S: You can use this class name as well cn-set-cookie instead of wp-default or set a class to those anchors that you don't want to smooth scroll called by them.
Give it a class... Say "no_smooth".
Ok
Then exclude it using :not().
$(document).on('click', 'a[href^="#"]:not(".no_smooth")', function (event) {
//... Rest unchanged
});
I have 3 divs and I want after the page loads delay 0.5 then scroll to second div delay 0.5 then scroll to 3rd div. but my problem is I cannot get it to auto scroll to any of the divs
<div id="mydiv">Content</div>
<div id="mydiv2">Content2</div>
<div id="mydiv3">Content3</div>
$(window).on('load', function () {
$('html, body').animate({
scrollTop: $("#myDiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#myDiv3").offset().top
}, 3000);
});
Looks like you just have a typo. You had $("#myDiv2") vs $("#mydiv2"). Also use $(document).ready() instead.
$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mydiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#mydiv3").offset().top
}, 3000);
});
jsFiddler
You onload event isn't valid try this universal onload from Jquery :
$(document).ready(function () { ... add you code here ... });
Your problem is in your HTML. Your divs are mydiv with a lower case 'D', but you are referencing #myDiv with an uppercase 'D'.
Here's some bit of the code, I wrote -
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
}, )
})
I'm not sure why this is happening, would appreciate your help!!!
Well, if you're using a css framework like Material Design lite, then you need to use something different.
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('.mdl-layout__content').animate({
scrollTop: $(href).offset().top
},1000 )
})
Wrap it into ".mdl-layout__content", instead of "html, body" as it fixes it. I had the same problem, but that fixed it :)
Add some time value in animate function like animate((),1000) .They will give smooth effect .see the jquery documentation of animate()
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
},1000 )
})
2 things you need to look at
writing HTML correctly .the link must have href with # inside it, in your case <a id="go" href="#goTo">GOOO</a>
check if your id's are correctly written in html and then in JQ
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000)
})
div {
margin-top:100vh;
height:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="go" href="#goTo">GOOO</a>
<div id="goTo">
</div>
I am trying to use the scrollTop function for my program, but I am finding that I am writing a lot of repetitive code.
This is an example:
<div id="table_contents >
<ul>
<li id="one"> title One </li>
<li id="two"> title Two </li>
</ul>
</div>
<div id="content">
<p id="target_one"> I am content one </p>
<p id="target_two"> I am content two </p>
</div>
If i was to click on 'title One' I want to scroll to 'I am content one'
Likewise for title two and content two.
This is easy enough to do with jQuery/JS
$("#one").click(function() {
$('html, body').animate({
scrollTop: $("#target_one").offset().top -20
}, 800);
});
But say for example my table of contents has 15 elements in it, and I want to make each clickable to scroll to its content. For this I would have to repeat the above code 15 times for each element.
Is there a better way than that?
Just change your script to :
Method 1
$("#table_contents").on("click","li",function() {
$('html, body').animate({
scrollTop: $("#target_"+$(this).prop('id')).offset().top -20
}, 800);
});
In this method, the id of the clicked element will be appended to "target_", to locate the "target id". This method will work even for the dynamically added li elements.
Method 2 :
Without ids [but same order]:
$("#table_contents").on("click","li",function() {
$('html, body').animate({
scrollTop: $("#content p").eq($(this).index()).offset().top -20
}, 800);
});
in this method, the index of the element li is mapped to the index of the p elements to locate the scroll location.
And done!!
http://jsfiddle.net/bmL0o9ez/
http://jsfiddle.net/bmL0o9ez/2/
LIVE FIDDLE DEMO
$("#table_contents ul li").click(function () {
var theIdAttr = $(this).attr("id");
$("html, body").animate({
scrollTop: $("#target_" + theIdAttr).offset().top -20
});
});
You can use a more generic selector for type sort of thing where each element requires identical behavior.
$("#table_contents li").click(function() {
var liElement = $(this);
$('html, body').animate({
scrollTop: $("#target_" + liElement.attr('id')).offset().top -20
}, 800);
});
You can build the id of the paragraph dynamically based on the id of the li.
HTML
title One
title Two
<div id="content">
<p id="target_one"> I am content one </p>
<p id="target_two"> I am content two </p>
</div>
Javascript:
$("#table_contents li").click(function() {
$('html, body').animate({
scrollTop: $('#target_' + $(this).attr('id')).offset().top -20
}, 800);
});
Here's a solution that doesn't rely on using IDs at all, but instead uses jQuery's index() function:
$("#table_contents li").click(function () {
$('html, body').animate({
scrollTop: $("p").eq($(this).index()).offset().top - 20
}, 800);
});
jsFiddle example
Make it generic, like:
$("#table_contents ul li").click(function() {
$('html, body').animate({
scrollTop: $('#target_'+ $(this).attr("id")).getId.offset().top -20
}, 800);
});
if you keep the content in order you could even go ultra generic, like:
$("#table_contents ul li").click(function() {
var index = $(this).index();
$('html, body').animate({
scrollTop: $('#content:nth-child('+index+')').getId.offset().top -20
}, 800);
});
Not tested, but it should give you an idea
cheer mate
I do
$("#content p").each(function() {
var heights = [];
heights.push($(this).offset().top);
});
Then do
heights[your_target_as_index];
Done?
I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>