Weiß nicht, ob es in deinem Anwendungsfall hilfreich sein könnte, denn es handelt sich hierbei um experimentelle Technologie, allerdings möchte ich ergänzend eine CSS-Only Lösung hinzufügen.

Was die Kompatibilität angeht: Die Lösung wird nur vom Firefox weitgehend unterstützt. IE und Safari sollen wohl auch hier und da was umgesetzt haben, allerdings sollten das wohl sehr unfertige Lösungen sein.

Desweiteren werden im Moment größere Änderungen an dem Modul vorgenommen, das heißt also dass einige Eigenschaften sehr wahrscheinlich abgeschafft werden.

Für deinen Fall kann das CSS Modul "CSS Scroll Snap Points Moduel Level 1" von Interesse sein. Dabei lassen sich Snap-Points in einem scrollbaren Container festlegen, zu denen automatisch hingescrollt werden wenn in die entsprechende Richtung gescrollt wird.

Relevant sind dabei die Eigenschaften scroll-snap-type (womit sich die Art und Weise festlegen lässt) und scroll-snap-points-y. (bzw. scroll-snap-points-x bei horizontalem Scrolling)

Letztere Eigenschaft (scroll-snap-points-x bzw. scroll-snap-points-y) fallen übrigens unter den o.g. Änderungen, d.h. diese werden abgeschafft werden.

Hier eine kleine Demo: (Funktioniert wohl nur im Firefox 39+):
https://jsfiddle.net/ke27ffut/

Genauere Informationen kannst du hier entnehmen:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y
https://developer.mozilla.org/en-US/docs/tag/CSS%20Scroll%20Snap%20Points

Hier ein genereller Überblick über die ganzen Eigenschaften mit Erklärungen: (Funktionieren alle aber nicht zwingend)
https://css-tricks.com/introducing-css-scroll-snap-points/

Und hier nochmal ein Link zur W3C-Spezifikation des Moduls:
https://www.w3.org/TR/css-snappoints-1/

Dafür gibt es das wheel-Event:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Browser\_compatibility

Über deltaY kannst du herausfinden, in welche Richtung gescrollt wurde. Anschließend kannst du mittels scrollTop auf dein scrollbares Element (bspw. der Inhaltswrapper) die aktuelle Scrollposition herausfinden.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Danach kannst du mittels element.getBoundingClientRect() bzw. mittels $(element).position (wenn du jQuery nutzt) die Position aller Elemente vergleichen und das nächste Element in der jeweiligen Richtung aussuchen.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://api.jquery.com/position/

Bei getBoundingClientRect musst du aufpassen, da es die Position relativ zum Viewport wiedergibt, d.h. du müsstest die Werte von dem Elternelement nochmal abziehen. Die einfachere Variante wäre jQuery.

Danach mittels scrollTop zu der Position scrollen.

maximilianus7 hat dein Problem wahrscheinlich gefunden, ich führs jetzt nur nochmal etwas genauer aus:

Du benutzt Templatestrings, um die Elemente mittels jQuery zu selektieren. Da diese ein neues Feature des ES6 Drafts sind, sind sie noch nicht von allen Browsern auf allen Systemen unterstützt, mal abgesehen davon dass man sie sowieso nur nutzen sollte, wenn man sie braucht. (U.a. weil sie auch langsamer sind) Da die Selektoren auch keinerlei Variabilität oder dergleichen besitzen, machen die Templatestrings hier erst recht keinen wirklichen Sinn. Also einfach Backtick durch doppelte/einfache Anführungszeichen ersetzen und gut ist.

Templatestrings scheinen bei den Mobilgeräten aktuell nur unter iOS9 unterstützt zu sein. Genauere Angaben zur Kompatibilität (und zur Kompatibilität der anderen ES6 Features) findest du auf:

https://kangax.github.io/compat-table/es6/

Mir erscheinen die bisherigen Antworten nicht besonders zufriedenstellend (oder ich habe irgendwas übersehen?) daher antworte ich hier auch nochmal:

Generell kannst du, wie bereits von medmonk schon erwähnt, mehrere Klassen direkt auf einem Element zusammenfassen, damit sparst du dir das Verschachteln der span-Elemente: (Mal abgesehen davon dass zwischen "span" und "class" ein Leerzeichen gehört)

<span class="price amount">40.00EUR</span>

Um mittels CSS alle span-Elemente zu selektieren, die sowohl die Klasse price als auch die Klasse amount besitzen, setzt du diese im Selektor einfach direkt hintereinander: (ohne Leerzeichen)

.price.amount { /* Style... */ }

Bzw. mit dem Wrapper drumrum:

.product_details > .price.amount { /* Style... */ }

Alle span-Elemente, die nur einer der beiden Klassen besitzen, wären hiervon ausgeschlossen.

Kleine Demo: https://jsfiddle.net/10gpbz81/

Du könntest das Anchor-Element mittels position relative um die Höhe des Headers nach oben verschieben, wenn ich dich richtig verstanden habe:

a.anchor {
  position: relative;
  top: -80px;
}

---

<h1>
  <a class="anchor" id="testanchor"></a>
  Testanchor
</h1>

Demo: https://jsfiddle.net/8z06d8r1/

Kannst du dich etwas genauer fassen? Was meinst du genau mit weißer Fläche? So wie ich das jetzt verstehe kannst du doch einfach in deinem TextContainer die background-color mittels CSS auf weiß oder auf eine andere helle Farbe setzen. Ansonsten musst du schon mehr ins Detail gehen/deinen Code zeigen etc.

Neben der bereits genannten Möglichkeit, das über ein div-Element und Javascript zu lösen, geht das ganze mittels dem label-Element auch ganz ohne Javascript: 

https://jsfiddle.net/vxv790x7/

Wenn du das Ganze etwas abenteuerlicher haben möchtest und dir Cross-Browser Support nicht so wichtig ist, dann kannst du auch auf das input-Element des Buttons im Shadow DOM des File-Input-Elements zugreifen. (viele Elemente bestehen an sich aus mehreren anderen Elementen, die aber normalerweise nicht sichtbar und zugänglich sind. Diese befinden sich dann im Shadow DOM des Elements)

Hier ein Beispiel mit o.g. Lösung und die Lösung mit Shadow-DOM:

https://jsfiddle.net/vxv790x7/1/

Wie gesagt, Cross-Browser Support wird etwas schwieriger, habe gerade nicht so Lust mir anzuschauen wie das Element bei den anderen Browsern heißt, daher funktioniert das Shadow DOM Beispiel auch nur in Webkit-Browser. (Chrome, ...) Darüber Bescheid zu wissen kann nicht schaden, würde dir davon aber trotzdem eher abraten.

Obfuscation ist dein Stichwort.

Du kannst HTML mittels Javascript obfuscaten, dieser generiert dir deinen Code dann wenn die Seite geladen wird:

http://stackoverflow.com/questions/8206630/dynamically-obfuscate-html

Allerdings beachte: Der Browser liest das korrekt, d.h. mit einem einfachen Druck auf die F12-Taste (Entwicklertools zumindest in Chrome/FF) ist der Code wieder sauber lesbar zu haben. Eine andere Möglichkeit gibts nicht, der Browser muss es schließlich auch lesen können.

Javascript-Obfuscation gibts auch:

http://stackoverflow.com/questions/2060984/how-can-i-encrypt-javascript-code-so-that-its-not-decryptable

Allerdings beachte: Obfuscation ist im Endeffekt nur ein Zeitaufwand, mehr nicht. Wer an deinen Code ran will, der kriegt den auch. Außerdem ist Obfuscation gern auch fehleranfälliger. Allgemein würde ich dir also von Obfuscation abraten - es hilft nicht, sondern macht dir am Ende wahrscheinlich das Leben nur schwerer

Ich weiß nicht, ob ich dich richtig verstehe, aber du kannst die Funktion doch einfach in einer entsprechenden Funktion auf onclick callen?

anderesElement.onclick = function() { nameDerFunktion("String-Argument"); };

Oder alternativ so:

var click_event = function(str) { return function() { nameDerFunktion(str); }

anderesElement.onclick = click_event(str);

Bzw wenn deine Funktion nur für das (Click-)Event ausgelegt ist, kannst du diese entsprechend direkt so umstrukturieren.

Naja, zumindest wenn ich dich jetzt nicht missverstanden habe.