When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.
$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.
Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});
Related
friends,
I'm building single page website, which uses the jQuery function to scroll to an anchor, when the menu link is being selected. Here is the code I use:
(function($) {
var jump = function(e)
{
if (e) {
e.preventDefault();
var target = $(this).attr("href");
} else {
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top - 150
}, 1500, 'swing', function()
{
location.hash = target - 150;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show()
jump()
}, 0);
} else {
$('html, body').show()
}
});
})(jQuery)
Now this function is called for all html 'a' elements with 'href'. I need to modify the function above, so it would work for all defined links except this one with the anchor #nav-menu:
<span></span>
Any suggestions would be very appreciated.
Jquery provide a set of built-in filters that you can use in your case you may use:
the built in filter not() as following:-
$("a[href^=#]:not([href=#nav-menu])").click(jump);
build you own business filter as following:-
$("a[href^=#]").filter(function() {
//you may here do whatever filteration business you want
return $(this).attr("href")!='#nav-menu';
}).click(jump);
Simple Example Here
I'm using this simple code, and it's working fine.
$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 20000)
What I would like is to after the bottom has been reached immediately go back to the top of the page and start scrolling down slowly again. How would one achive something like this in JQuery?
Thank you guys!
you can jump back to the top of your page using the following javascript function:
function jump(elementId){
var location = document.getElementById(elementId).offsetTop;
window.scrollTo(0, location);
}
just use the id of some element at the top of your page.
Not sure what you are trying to do and what "reload" means but here is a quick snippet to get you started:
JSnippet Demo
As you can see its configurable and easy to understand:
$(function() {
var pageScan = {
speed : 10000,
loop : true,
delayRestart : 1000,
start : function(){
pageHeight = $('body').height() - window.innerHeight;
pageScan.proc(pageHeight);
},
proc : function(to){
$("body").animate(
{scrollTop: to},
pageScan.speed,
"linear",
function(){
if (pageScan.loop) {
setTimeout(function() {
window.scrollTo(0, 0);
pageScan.start();
}, pageScan.delayRestart);
}
});
}
};
pageScan.start();
});
We could do something easier like this:
(function (){
var div = $('#myDiv'),
infiniteScroll = function () {
//---gets the bottom of the page value
var bottomHeight = div[0].scrollHeight;
var callback1 = function () {
//once it gets into this callback function
//it resets the position to zero
div.scrollTop(0);
//invokes again the function infinite scroll
infiniteScroll();
};
div.animate({scrollTop:bottomHeight},20000,callback1)
};
//starts the function for the very first time
infiniteScroll();
})();
I created a codepen so you can see it working and play with it:
http://codepen.io/dieggger/pen/VLoZWv?editors=101
What I have is this:
$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var t=$(this.hash).offset().top;$('.wrapper').animate({scrollTop:t,},1000)})});
and actually place divs everywhere as a reference such as:
<div id="about"></div>
It actually scrolls down to those reference points but I dont see the name in the url. When I scroll down and end up in the about section I want it to somehow show up like this www.site.com/#about
Any idea what I am doing wrong? The site used is a HTML document.
give a try to this
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can use Html5 History API Good tutorial for using HTML5 History API (Pushstate?)
$(document).ready(function() {
$('a[href^="#"]').on('click',function(e) {
e.preventDefault();
var t = $(this.hash).offset().top;
$('.wrapper').animate({ scrollTop:t }, 1000);
history.pushState(null, null, location.href + $(this).href); // <- not sure whether your links are relative or absolute.. do change appropriately..
})
});
in an project I do use mmenu first time. It works as expected but there is one thing I would love to have working, but it still isn't :/
Here's the URL: http://1pager.gut-entwickelt.de/
What I would love to see: After selecting an menu-point, it shouldn't scroll within milliseconds. It should wait till the menu is closed, then start scrolling.
Thatfor I added this script-part:
Me.mobileMenu.mmenu({
zposition: "front",
onClick: {
preventDefault: true,
setSelected : false
}
});
Me.mobileMenu
.find('a')
.on(
'click',
function() {
var href = $(this).attr('href');
if (Me.mobileMenu.hasClass('mm-opened')) {
Me.mobileMenu
.off('closed.mm')
.one(
'closed.mm',
function() {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
return false;
}
);
} else {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
}
return false;
}
);
This seems to work here: http://mmenu.frebsite.nl/examples/responsive/index.html
But on that page it don't... any ideas?
Regards,
Oliver Lippert
The "closed" event is triggered when the menu finished closing, so you shouldn't need an extra timeout.
Have a look at this example, it's a bit more straightforward:
http://mmenu.frebsite.nl/mmenu/demo/onepage.html
Extended to Fred's reply I had another JS-code for doing the scroll. After disabling it, now the menu closes first, and the Scroll starts later.
I'm building a site using Twitter Bootstrap, and I got the scrollspy to work, using the below javascript:
$('body').scrollspy({ target: '.navbar' })
But it stopped working for me, after I add the script to enable smooth scrolling:
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('.nav-toggle').on('click', function (event) {
event.preventDefault();
$('#bs-example-navbar-collapse-1').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 70;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#bs-example-navbar-collapse-1');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
I'm thinking I must have added the scrollspy in an incorrect position. I have very little knowledge of javascript. If someone can point me the way to inserting it in the correct order/space/line, that would be great!
Thanks in advance!
You may want to use a third party plugin such as jquery.localScroll (which relies on jquery.scrollTo). It provides great smooth scrolling and is easy to implement. A lot easier than reimplementing the wheel.
https://github.com/flesler/jquery.localScroll