3 replies [Last post]
Dawn40
Dawn40's picture
Offline
newbie
Last seen: 8 years 34 weeks ago
Timezone: GMT-6
Joined: 2011-01-24
Posts: 6
Points: 9

I want to click on an anchor link and have webkit-transition and webkit-transform:translate take me, move me, scroll me over to the other places <div>s of my document. Right now it is jumping me to the anchor tags but not transitioning over.
Is this even possible with CSS?

I have another webpage where I can make a div come to where I am but in this case I want to travel to the div.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 24 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Transitions can only be used

Transitions can only be used on the element that you're interacting with. What you're describing involves other elements, either the body or the element you want to move to, so you'd have to use javascript instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Dawn40
Dawn40's picture
Offline
newbie
Last seen: 8 years 34 weeks ago
Timezone: GMT-6
Joined: 2011-01-24
Posts: 6
Points: 9

moving from one anchor to another

Here's the URL of the website I made.
http://www3.telus.net/broadbentfamily/My%20Norwex%20House.html

I have tried softscroll javascript to scroll from one link to another but it just disables my links.

On a side note, I am trying to learn javascript but I feel like I can't even find the "words" to start "talking". With HTML and CSS at least there is a "dictionary" or list of words to "pronounce" and experiment "talking" with. I have tried a lot of javascript tutorials but can't seem to move past (stupid and useless) alerts.

Dawn40
Dawn40's picture
Offline
newbie
Last seen: 8 years 34 weeks ago
Timezone: GMT-6
Joined: 2011-01-24
Posts: 6
Points: 9

javascript scroll to anchor horizontal and vertical

Party
After days of googling and studying I found these 2 websites:
http://www.mediacollege.com/internet/javascript/page/scroll.html
[which taught me javascript ScrollBy]
and
http://stackoverflow.com/questions/3267794/scroll-page-until-some-height
[which taught me javascript setInterval and clearInterval],
I now have links where I can click on a link and move me both horizontally and vertically over to the other places!

<!DOCTYPE HTML>
 
 
<html>
<head>
<title>java scroll 
 
experiment2</title>
<link rel="stylesheet" 
 
href="javascrollexperiment.css">
 
<script type="text/javascript">
function startPageScrollroom2() {var 
 
scrollAmt = 0; var id=setInterval 
 
(function() {if(scrollAmt<2550)
 
{window.scrollBy(20,0); scrollAmt
 
+=50; }
else{clearInterval(id);}},100); }
</script>
 
<script type="text/javascript">
function startPageScrollroom3() {var 
 
scrollAmt = 0; var id=setInterval 
 
(function() {if(scrollAmt<6000)
 
{window.scrollBy(20,0); scrollAmt
 
+=50; }
else{clearInterval(id);}},100); }
</script>
 
<script type="text/javascript">
function startPageScrollroom4() {var 
 
scrollAmt = 0; var id=setInterval 
 
(function() {if(scrollAmt<2000)
 
{window.scrollBy(0,20); scrollAmt
 
+=50; }
else{clearInterval(id);}},100); }
</script>
 
<script type="text/javascript">
function startPageScrollroom5() {var 
 
scrollAmt = 0; var id=setInterval 
 
(function() {if(scrollAmt<2000)
 
{window.scrollBy(25,20); scrollAmt
 
+=50; }
else{clearInterval(id);}},100); }
</script>
 
<script type="text/javascript">
function startPageScrollroom6() {var 
 
scrollAmt = 0; var id=setInterval 
 
(function() {if(scrollAmt<2000)
 
{window.scrollBy(50,20); scrollAmt
 
+=50; }
else{clearInterval(id);}},100); }
</script>
 
</head>
<body>
 
<div id="room1">
<a 
 
href="javascript:startPageScrollroom2
 
()">go to room 2</a>
<a 
 
href="javascript:startPageScrollroom3
 
()">go to room 3</a>
<a 
 
href="javascript:startPageScrollroom4
 
()">go to room 4</a>
<a 
 
href="javascript:startPageScrollroom5
 
()">go to room 5</a>
<a 
 
href="javascript:startPageScrollroom6
 
()">go to room 6</a>
</div>
 
<div id="room2">
<a href="#room1">Back to room 1</a>
</div>
 
<div id="room3">
<a href="#room1">Back to room 1</a>
</div>
 
<div id="room4">
<a href="#room1">Back to room 1</a>
</div>
 
<div id="room5">
<a href="#room1">Back to room 1</a>
</div>
 
<div id="room6">
<a href="#room1">Back to room 1</a>
</div>
 
</body>
</html>