7 Replies - 527 Views - Last Post: 29 July 2014 - 02:36 PM

#1 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Problem with page scrolling

Posted 29 July 2014 - 07:30 AM

Hello guys, recently I started working on a website, and I want to have that cool scroll transition but I can't implement it somehow. I've tried multiple tehniques and none of them seem to work. I tried using ScrollTo and LocalScroll but that doesn't work for me too.

What I've done is I've created one section and in menu I have put the anchor that references to that section. None of the javascript code won't seem to work. This is the link beetween section and anchor. It just goes to that section witouth any transition.


<li><a href="#section1"><span class="glyphicon glyphicon-user"></span> About</a></li>


<section id="section1"></section>


If someone could help me and explain what should I do to make a scrolling effect. Thanks :)

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with page scrolling

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Problem with page scrolling

Posted 29 July 2014 - 07:41 AM

View Postognjengt, on 29 July 2014 - 06:30 AM, said:

I tried using ScrollTo and LocalScroll but that doesn't work for me too.


What you are looking for is scrollBy

View Postognjengt, on 29 July 2014 - 06:30 AM, said:

What I've done is I've created one section and in menu I have put the anchor that references to that section. None of the javascript code won't seem to work. This is the link beetween section and anchor. It just goes to that section witouth any transition.


This is the default behavior of the local link.

If you make a function that you can add to the onclick event you will be able to get a smooth transition to that point.
Was This Post Helpful? 0
  • +
  • -

#3 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Re: Problem with page scrolling

Posted 29 July 2014 - 07:57 AM

Ok, still doesn't seem to work, can you help me write it proeprly, I have included all latest javascript and all that and what I have tried is this:
<script type="text/javascript">
$(document).ready(function work() {
   window.scrollBy(0,50);
});
</script>



<li><a href="#" onclick="work()"><span class="glyphicon glyphicon-user"></span> About</a></li>

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Problem with page scrolling

Posted 29 July 2014 - 08:05 AM

Here is an example of how I scroll to the top of a page.

function goToTop(options) {
    // Set a default value for the options if necessary.
    if (!options.hasOwnProperty("speed") || typeof options.speed != "number") {
        options.speed = 500;
    }
    // Get body tag
    var body = document.getElementsByTagName("body");
    // Get html tag
    var html = document.getElementsByTagName("html");
    // set the scrollTop
    var top = body[0].scrollTop || html[0].scrollTop;
    // Set the scrollLeft
    var left = body[0].scrollLeft || html[0].scrollLeft;
    // check to see if the page is at the top    
    if (top > 0) {
        // Start a timer to slow the scroll to the top
        var timerHandle = window.setInterval(function () {
            // Calculate the scroll amount required per tick.
            var scrollAmountPerTick = top / options.speed * 10;
            // Subtract the amount from the top.
            top -= scrollAmountPerTick;
            // Scroll to the same coordinate left and the new top
            window.scrollTo(left, top);
            // Check if the page is at the top
            if (top < 1) {
                // Set top to zero
                top = 0;
                // remove the interval timer so it will be able to scroll down again
                window.clearInterval(timerHandle);
            }
        }, 10); // the 10 is the time to call the interval
    }
}


This uses scrollTo() instead of scrollBy().
Hope you get the idea.

This post has been edited by laytonsdad: 29 July 2014 - 08:06 AM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3474
  • View blog
  • Posts: 11,805
  • Joined: 12-December 12

Re: Problem with page scrolling

Posted 29 July 2014 - 08:11 AM

<script type="text/javascript">
$(document).ready(function work() {
   window.scrollBy(0,50);
});
</script>

This doesn't work because work() is hidden inside the ready() method - there will be an error in your browser's console. The syntax for ready is incorrect as well.

I think you need to decide if you want to use jQuery or (pure) Javascript. In either case, I wouldn't use an a-tag, and then have to cancel its default behaviour. You can attach a click-event to any element.

This post has been edited by andrewsw: 29 July 2014 - 08:19 AM

Was This Post Helpful? 0
  • +
  • -

#6 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Re: Problem with page scrolling

Posted 29 July 2014 - 08:17 AM

I'm relatively new to Javascript and lets say I kinda get the point of this code, but i really need something very simple, or someone to explain me how to implement that scrolling transition, that when i click some link it scrolls to a reference. I don't know if it is wrong to use href="#" is that stopping javascript from working or what, I've set onclick function but still I can't figure out how to implement this transition on the most simple way.
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 386
  • View blog
  • Posts: 1,402
  • Joined: 15-January 14

Re: Problem with page scrolling

Posted 29 July 2014 - 10:45 AM

With pure Javascript, smooth animation only happens one way - running a function every few milliseconds to change things by a small amount. In your case, when someone clicks a link you'll need to figure out where the target position is on the page where you want to scroll, and start a function that runs every few milliseconds to update the scroll position by a small amount until it reaches the target position.

For example, say the user's Y scroll position is 100, and the target is 200. Every time the function runs it gets the current position, finds the target, and increments the scroll amount by a little bit. So the first time it runs, maybe it changes the Y position to 105. Then 25 milliseconds later it runs again, and changes the position to 110, then 115, 120, etc until it gets to 200, when it stops.

That's how animation in Javascript works, that's as simple as it gets with plain Javascript. Libraries like jQuery wrap that up into easy to use functions which obscure the actual details about how it works. If you want to do it with plain Javascript then there are 2 ways to schedule a function to run, setTimeout and setInterval. The only difference between them is that setTimeout will run the function once (even though the function can use setTimeout to schedule itself to run again), and setInterval runs the function until you use clearInterval to stop it from running again. I would suggest using setTimeout and have the animation function decide whether or not it needs to run again.

https://developer.mo...ndow.setTimeout
https://developer.mo...vaScript/Timers
Was This Post Helpful? 0
  • +
  • -

#8 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Re: Problem with page scrolling

Posted 29 July 2014 - 02:36 PM

Got it, thanks! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1