Jump to parts of file in scrollbar

Question

How should I create click to jump to parts of a file in the scrollbar. I have limited space, so I would like to overlay this with the scrollbar.

I was thinking of something like

^{download bmml source – Wireframes created with Balsamiq Mockups}

It would go in a code editor for relative beginners. The sections are parts of the code. For instance:

E.flagClicked: # section start
    L.think("ladida")
    ...
E.keyPressed("space"): # section start
    M.move(10)
    L.say("Hi")
    ...

EDIT: I know how to implement, I want to know if my mockup makes sense UX wise and how I could improve the UX to make it easier for new users to learn that they can click and jump.

Answer 1

It can work but it has some issues

...so make sure there is a tutorial or a label to show the user how this works. For example, if the user hovers over the yellow part, you might include a tooltip that says Jump to code example C, for example.

Note that a similar approach is used in browser and other apps...here is how the Chrome browser handles finding results in page:

However, with Chrome on windows, clicking on a yellow results marked doesn't navigate to the marker. Instead, the scrollbar works as any other Windows scrollbar: clicking on the scroll track navigates down a page, rather than moving to the marker (here's why).

Therefore, your approach can work but keep in mind that users may be accustomed to different scrollbar behavior, so you will need to make sure users are educated on how the jump works for your app.