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.