I have a link link to test and when clicking on it, the page will instantly jump to the 'test'-content.
How can I add a transition when switching between this in-page links?
Thank you very much :D
EDIT:
It would be nice if I could use a css keyframe instead of the jquery animation.
Anyone a solution?
The fastest way would be load in jQuery and insert this snippet.
Step 1: Insert jQuery script tag before the closing body tag (</body>)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Step 2: Insert this snippet below
<script>
// Bind all a href clicks to this function
$(document).on('click', 'a', function(event){
// Prevent default events
event.preventDefault();
// Animate the body (html page) to scroll to the referring element
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
You can edit where it says 1000 to change the speed and you can also add or subtract scrollTop: $( $.attr(this, 'href') ).offset().top to get additional offset off your element.
Example: This will be 100 pixels above your element instead of exactly on top.
scrollTop: $( $.attr(this, 'href') ).offset().top - 100
I'm assuming you mean to smoothly scroll to the target instead of jumping there abruptly. If so, here's a way using javascript and jQuery.
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
div {
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test
<div></div>
<div id="test">test</div>
Here is a jquery example:
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
and a fiddle: http://jsfiddle.net/9SDLw/.
Neither the code nor the fiddle are mine, it is an answer I found here Smooth scrolling when clicking an anchor link
This is not possible using CSS animation keyframes, the scroll position is not a CSS property that can be affected. You can change the position of the page scroll using Javascript or a number of javascript libraries (eg: jQuery).
Related
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>
This website has a div with smooth scrolling:
http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html
But how can I make this smooth scrolling on the whole body instead of a div?
You can use something like this:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
And it will smooth scroll the whole page, instead of particular div. The main crux of this is:
$('html,body').animate({
scrollTop: ...
}, 1000);
For more information, have a look at the article: Smooth Scrolling.
If you are planning on using the jQuery extension that you referenced: Looking through the source code you can just call the smoothWheel function on the document instead of the div.
(https://fatlinesofcode.github.io/jquery.smoothwheel/src/jquery.smoothwheel.js)
Initialize:
$(document).smoothWheel()
Disable function:
$(document).smoothWheel({'remove':true})
DEMO:
https://jsfiddle.net/SeanWessell/0omtkbvt/
I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#article-list').scrollTo('#news .section-wrap'); // this is the line I added
$('#article-list').fadeOut(500, function(){
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});
You will need to animate html and body and point to the selector within the jQuery animate function. Try this:
$('html, body').animate({
scrollTop: $('#news .section-wrap').offset().top
}, 2000);
Try something like this:
$(".paging-navigation a").click(function(){
$('html, body').animate({
scrollTop: $("#news .section-wrap").offset().top
}, 500);
});
You might need to alter something in this code, either timing or some bug since i could not test it currently.
Hope it is helpful.
scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .
As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I am trying to insert smooth scroll to anchor links in the same page script into my web, but that doesn't seem to work. I tried a few of them but none works...
Here are some of them which I tried:
Best way to smooth scrolling to an internal link
http://css-tricks.com/snippets/jquery/smooth-scrolling/
Smooth scrolling when clicking an anchor link
http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links
http://www.ezmacwebdesign.com/Demo/smooth-scroll.html
Maybe I am doing something wrong? I am inserting these scripts to the <head> part in between <script> </script>, I am very new to this and I know almost nothing about js and jQuery...
I also have this script in my head section which sticks my header to the top while scrolling, maybe it is causing the trouble?
<script> $(function(){
var stickyHeaderTop = $('#headertop').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#headertop').css({position: 'fixed', top: '0px'});
$('#headeralias').css('display', 'block');
} else {
$('#headertop').css({position: 'static', top: '0px'});
$('#headeralias').css('display', 'none');
}
});
});
</script>
The link:
<div class="hbutton">Vlog</div>
place where it should link to:
<a name="vlog" id="vlog"><div id="vlog"></div></a>
looking forward for help :)
Did you include the script required for scrolling as well?
If not, add this code also in your script tag along with your other js code and try:
$(document).ready(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
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>