0

Here's my website: violetoeuvre.com

What I'd like to do is have multiple veritcal and horizontal scrolls on the page. I think I should do this with Jquery.

Vertical: Writing link at the top would scroll down when clicked so that the writing section on the side bar is at the top of the page.

Contact link at the top – same thing (When I get the hang of this, I’m going to add up and down arrows on either side of the elements in the sidebar to scroll up and down to next / previous element. )

Horizontal: In the writing section on the sidebar, I’d like the deadspin, gawker, and the awl links to scroll to content within the writing box when those buttons are clicked. I imagine this would have an overflow:hidden element somewhere? If vertical scrolling within this box would be easier, that’s ok too.

I found this excellent site which I think will be helpful:

http://demos.flesler.com/jquery/scrollTo/

relative position and relative selector look promising.

I'm guessing that I make each button a link that will be able to scroll to another part of the page.

So I would this class selector (the contact nav bar at the top), for example:

.nav_box_r {
    display: block;
    float:left;
    width:219px;
    text-align: left;
    padding-right: 40px;
    padding-top: 169px;
    margin-top: 0;
}

as a link to scroll to the bottom of the page to the contact info, like

$(...).scrollTo( 0, 800, {queue:true} );

(Secondary question: Should I redo all the statis elements to have fixed positions?)

I'm new to this so would appreciate specificity. (Does the script go in the head, are the scrollUp / down to relative or fixed positions, etc.)

Thank you!

Claire
  • 159
  • 1
  • 4
  • 15

2 Answers2

0

Hopefully this helps, you can use a href to jump to divs within your website.

<a href="#some_div">Link</a>

There is also this page that can help you as well. How can I scroll to a specific location on the page using jquery?

Try this code

$(".yourclass").click(function() {

   $(this).animate({ scrollTop: $('#title1').offset().top }, 1000);

});

Community
  • 1
  • 1
Cam
  • 1,884
  • 11
  • 24
  • i saw that page, but i don't have the knowledge base yet to understand it fully. where should i put all those elements? Which code do I use and where do I put it? – Claire Mar 27 '13 at 15:16
  • $('#your-div').scrollView(); This would go inside your $(document).ready(function() { //in here }); – Cam Mar 27 '13 at 15:24
  • Honestly it sounds like you dont need jQuery to do what you want. Some CSS and HTML would work well. – Cam Mar 27 '13 at 15:25
  • Thanks Cam - as I said, I'm new to this. I still don't know what you mean. – Claire Mar 27 '13 at 15:26
  • Can you put a jsfiddle together so we can see what you are trying to accomplish? – Cam Mar 27 '13 at 15:26
  • I added a new answer let me know if that helps. – Cam Mar 27 '13 at 15:30
  • I looked at some questions you post, a big helper for you download Firebug for firefox, also use console inside firebug and ie in ie you hit F12, refresh, and then read the console logs it will tell you what is messed up, it also will help in versioning for users using different versions of IE. Hope I was of some help. Let me know if you need anything. – Cam Mar 27 '13 at 15:40
  • Hi Cam - I would write a fiddle if I could! I assumed that this type of animation needed jquery / javascript. Basically I want links on one page that would initiate a scroll to another page. I don't think that's possible in css / html...Obviously in css/html you can put links on a page, but those go to external links or different pages. Is this wrong? Can I program a link to scroll to a position on the same page? Thanks. – Claire Mar 27 '13 at 15:44
  • *initiate a scroll to another PART of the same page. – Claire Mar 27 '13 at 15:45
  • I think this is what you want, but I think you want this to be animated. http://jsfiddle.net/4ygcf/ – Cam Mar 27 '13 at 16:00
  • Hi Cam - that works great, but wouldn't I need the jquery for a smooth scroll effect? Thanks for all your help. – Claire Mar 27 '13 at 16:02
  • Sorry to just now get back to you. Thanks a lot, Cam! – Claire Mar 27 '13 at 20:01
  • No problem let me know if you need help in the future. – Cam Mar 28 '13 at 13:11
0

Have a look at Balupton's ScrollTo plugin, it might be easier for you + there's a demo in there that shows you how to set it up.

Download zip at Github

PHearst
  • 751
  • 6
  • 29