Scroll to Anchor jumps back to start - javascript

Im a JS-beginner so i took this Code out of the Internet and i have some Problems with it. firstly, It always jump back to beginning of div if it scrolls up. Secondly if the browserwindow is smaller than the main wrapper, the content div jumps to the left and hide the Menu. Better to see it:
http://clan.morphium-gw2.de/nina/
Sorry for my bad english. Thanks
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('#container').animate({
'scrollTop': $target.offset().top
}, 2000, 'swing', function () {
window.location.hash = target;
});
});
});

could you try to debug and see the error it show,
print the value of target variable,and try to make a console.log(target)
let me know ;)

i found a syntax error into your script
change this :
<body onLoad="BilderVorladen('images/a1.jpg','images/a2.jpg','images/a3.jpg',,'images/a4.jpg');">
for this :
<body onLoad="BilderVorladen('images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg');">

Related

Link to different page and then scroll down to section (need to control scroll and where it stops)

I am trying to point a hyperlink to a separate page and then it scrolls down to a particular section.
I have found a post in which someone has found solutions;
however,
because I am somewhat of a novice,
I don't know where to start the PHP code.
Could anyone be so kind as to teach me?
Would I publish this in a new PHP document or in the theme document?
Here's the link: jQuery scroll to ID from different page
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
},2000,function()
{
location.hash = target;
});
}
$('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();
}
});
By the way, I need the scrolling to happen so the viewer understands there is more content on the page and I need to be able to control the speed of the scroll and the location in which is set.
Currently I've been using the Jump but it is not scrolling and It is landing on the section showing in the very top and not in the center of the screen.
Any thoughts or help on this ?

Angularjs - auto-scroll to location

I'm using ui-router with Angularjs and I would like to know how to make the screen scroll down (hopefully with easing to make it look better) to a specific part of my homepage when a user clicks on a link. I would also like it to scroll when someone clicks on a link from another page too.
The only examples I can find on here are about scrolling automatically to the ui-view which is not what I want. Other examples include ng-route which is not what I'm using.
Is there a feature built in to Angular/ui-router to help with this or should I just use what I have from another of my sites that doesn't use Angular:
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Any advice/code much appreciated.

scroll to has on click and on page load

Hi i currently have a load of anchor links to different content on my homepage, when the user click the link it scrolls down nicely. (see code below what i am using)
Now what i would like to happen is someone can link to that content from another page lets say /#hello
currently when someone goes to /#hello (not clicking on the link) it does the default anchor state which is ok but i really need that offset in the code to happen on page loaded # link
if anyone knows a simple piece of JQuery to make this happen or can modify my code (or give me pointers) to make it happen on load too that would help me alot.
thanks
**// Scroll to
$(document).ready(function(){
$(".scroll").bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-70
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});**
on every page load you could check it like this :
if(location.hash){
$('html, body').stop().animate({
'scrollTop': $(location.hash).offset().top-120
}, 900 );
}

Dual divs on the same place

I'm updating my website to something like this: axelboberg.se/en/beta_web And in the contact slide down I also want an about me div. ( When I click on About me the "slide down div" will slide down and show the about me section. And when I click on contact the contact section will be showed...) How can I make this? I'm a beginner when it comes to coding and hopefully this can be solved with a simple line of code...
--Update--
Thanks but I mean inside of the div that enters from the top, and only show about or contact at the time... Like minimalmokey did... http://minimalmonkey.com
I want the two parallel divs inside of the "slidenav" div.
It's too much code to post, see the source code of the website instead..
When I click on About me the "slide down div" will slide down and show the about me section. And when I click on contact the contact section will be showed...) How can I make this, and I'm a beginner when it comes to coding and hopefully this can be solved with a simple line of code...
Actually, this can be done with a simple line of code!
Change your "About me" link to this:
About Me
And, create a div like this:
<div id="AboutMe">This is about me!</div>
When you click the link, your browser will scroll to the AboutMe div.
JsFiddle: http://jsfiddle.net/NmrbP/11/
I think you are refering to a smooth scrolling effect. Use jQuery, here is my example code
DEMO http://jsfiddle.net/kevinPHPkevin/NmrbP/13/
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Edited
You can hide and show using jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/raS55/
$('.About').click(function(){
$('#About').show();
$('#Contact').hide();
})
$('.Contact').click(function(){
$('#Contact').show();
$('#About').hide();
})

Automatically scroll down as text appears on screen

I am showing a poem word by word (using lettering.js and jQuery. This is working well. Now I want to add an additional feature: I want the page to scroll down as the text appears on the screen. I am trying:
div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
$(this).delay(delay * i).fadeIn(fadeIn);
var _this = $(this);
$('html, body').scrollTop(
_this.offset().top - $('html, body').offset().top + $('html, body').scrollTop()
);
});
Also tried:
div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
$(this).delay(delay * i).fadeIn(fadeIn);
var _this = $(this);
$('html, body').animate({
scrollTop: _this.offset().top
}; 500);
});
But the page scrolls to some position on page load, and that's it. I have the feeling that the _this variable I am using isn't correct.
Any idea how to achieve my goal?
If you are adding content directly to your body and the height of your body gets dynamically changed as the elements get added then you need to do this.
div.show().find('span').each(function(i) {
$(this).delay(delay * i).fadeIn(fadeIn,function(){
var _body = $("body");
_body.animate({
scrollTop: document.body.scrollHeight;
}; 500);
});
});
What happens in your case is the animation for scrolling down occured immediately which wasnt needed , doing it this way ensures that the slide down animation occurs only when the fade-in animation has completed .
Otherwise if you are not adding content directly to your body you can still do it using the same technique applied to outer and inner.
As #Abhishek pointed out in his answer, I had to use a callback for the scrolling to work properly. However, the scrolling still wasn't working. So I ended up using Abhishek's code combined with the scrollTo plugin:
div.lettering('words');
div.find('span').hide();
$.scrollTo('h3', {duration:500});
div.show().find('span').each(function(i) {
var _this = $(this);
$(this).delay(delay * i).fadeIn(fadeIn,function(){
$.scrollTo(_this, {duration:100} );
});
});
The animation isn't as smooth as I want it to be because duration: 100 is a bit too quick.. But if I set a higher value, the scrolling will happen after all the text has been displayed, which feels a bit weird.

Categories