CODEWITHSUNDEEP
javascriptjqueryhtmlscrollsmoothing
user3667048
user3667048

Reputation: 27

Smooth scrolling to div related

I have spent the last few hours going through pages and pages on Google, following endless tutorials and nothing is working.

All I need to do, is have it so one button at the top, such as 'Social' (There are 4 but in this example I'll keep it brief and use one). Upon the user clicking 'said button it immediately scrolls (Smoothly) to another div further down the page.

The div's in question, 3 of which are text-based and 1 is another button. The buttons are custom so they hold a css value that points it to an image and rollover file in a Media folder. Just saying this because a lot of the tutorials I've used have stuck with < h1> tags or < ul> /< li> etc...

Here is the line of the button at the top of the page, in which, upon clicking will smooth-scroll to the other div: 

<div id="socialbutton"><a  draggable="false" title="Social Media"></a></div>

and here is the line that it should scroll to:

<div id="Abutton"><a  href="External Link" draggable="false" title="Visit my Abutton"></a></div>

*Please note that I've changed the values to 'Abutton' for privacy purposes, I can edit where needed if a solution arises.

Preferably I would like it to scroll to the top of the div, one method I tried completely cut off several hundred vertical pixels.

Apologies if any of this is wrong, I pretty much signed up to ask this question, my coding ability is slim at best (I'm more on the web-design side) but I still manage to put a page together eventually. This issue however, has me completely stumped.

I do have the latest JQuery library as a script in the head section if that helps.

Upvotes: 2

Views: 192

Answers (2)

jurassix
jurassix

Reputation: 1509

Fullpage.js may be an option for you. It's pretty slick.

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

Should do the trick:

$(document).ready(function() {
    $("#socialbutton").click(function() {
        $('html, body').animate({
            scrollTop: $("#Abutton").offset().top
        }, 2000);
    });
});

Just stick the above code between your <script> tags (if at the bottom of the page, no need for the document.ready wrapper - but I figured I'd include it if you're not too proficient in JS/jQuery)

Upvotes: 4

Related Questions