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.
Related
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 ?
I'am using this free script
http://codyhouse.co/gem/css-faq-template/
http://codyhouse.co/demo/faq-template/index.html#payments
The demo has the same problem as my website, although it's even worse on my website.
If you use the menu, everything works fine. You have some space above the header.
But if you visit the direct link http://codyhouse.co/demo/faq-template/index.html#payments not from the menu
it looks like this
As you can see, there is no space above the header "payments".
It is even worse on my page. It starts at "Can I have.." and the header is hidden. Can not find where I can adjust this when I visit the page direct from the link without it effects how it looks when I visit the section from the menu.
When user clicks on a section
//select a faq section
faqsCategories.on('click', function(event){
event.preventDefault();
var selectedHref = $(this).attr('href'),
target= $(selectedHref);
if( $(window).width() < MqM) {
faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
closeFaqsContainer.addClass('move-left');
$('body').addClass('overlay');
} else {
$('body,html').animate({ 'scrollTop': target.offset().top - 69}, 200);
}
});
Javascript code: http://codyhouse.co/demo/faq-template/js/main.js
Style: http://codyhouse.co/demo/faq-template/css/style.css
Just a quick hack, use
if(window.location.hash) {
// if url contain '#'
// scroll down a few pixle
}
EDIT:
it's hard to demenstrated this in jsfiddle, since it won't let me play with the # hash.
var url = 'http://example.com/test.html#hash';
//you can get by using window.location.href
var hash = url.split('#')[1];
// this get the 1st hash variable
if(hash) {
// if hash exist
$('html, body').animate({
scrollTop: "5000px"
}, 0);
// scroll down a little bit
}
It's seems there's a couple of problems here. For me it looks like everything happens when a scrolling event fire.
Try this:
$(document).ready(function(){
$(window).scroll();
})
Im using jQuery on my page to jump / scroll to IDs.
This works from other pages with anchors like
Jump & Scroll to ID on other page
and on the same page only with anchors like
Jump / Scroll to ID on the same page
Thats not the best solution because I have to change my nav menue but it works (I load another menue with other tags on the page).
Now im looking for a way to add an offset of -230px to the scroll / jump script, beause I have a fixed header on my page.
I think its simple but unfortunately im not a jQuery pro. How can I do this? Please Help me to add the -230 Offset to this function :)
The jQuery Code:
(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
},1000,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()
}
});
})(jQuery)
The responsible for saying how much your page will scroll down is scrollTop: $(target).offset().top, so, if you want to offset -230px just subtract 230 from $(target).offset().top.
But, if you do this in your current code it will not work, because you are changing the hash using location.hash = target;. When you do this, your browser will locate the hash and jump to it (without animating, just jumping).
Observe this demo: http://jsfiddle.net/pcyn2fvk/
If you click in the anchor, the page will scroll down to the content and after the scroll it will jump (this is caused by location.hash = target;).
Here is the demo without using location.hash = target;: http://jsfiddle.net/pcyn2fvk/1/
I assume you will need to change the hash, so, you can try a different approach, like this one explained by Lea Verou (http://lea.verou.me/2011/05/change-url-hash-without-page-jump/) that uses the History API instead of location.hash.
There are some other approaches, for example, you can remove the id of your target section (the one you clicked to scroll to) when you click to the anchor, then, when you change the location using location.hash, the browser will not find the clicked id, and will not jump to it, then, after that, you can reassign the id to your section.
Hope it helps!
I found another approach with anchor hashtags. This allows me to load a different page and scroll to my id with an offset.
In IE the scroll works well on all pages but all other browsers don't scroll on the smae page. If I click my link on the page wehre I want to scroll they jump to the hastags and dont use my jQuery scroll function. If I click the same link from an other URL the scroll works.
(other approach, only working from Link on Page A to Page B)
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top -230
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
});
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');">
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 );
}