Skip to content

Use CSS only solution to handle anchor margin and speed up scroll #217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ezyang wants to merge 2 commits into
base: pytorch_sphinx_theme2
Choose a base branch
from
Open

Use CSS only solution to handle anchor margin and speed up scroll #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d78735
Change how ipynb download link is found (#206)
clee2000 Jul 14, 2025
54a4f46
Use CSS only solution to handle anchor margin and speed up scroll
ezyang Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 0 additions & 99 deletions js/scroll-to-anchor.js
View file
Open in desktop

This file was deleted.

18 changes: 13 additions & 5 deletions js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,10 +250,19 @@ if (downloadNote.length >= 1) {
var tutorialUrlArray = $("#tutorial-type").text().split('/');
tutorialUrlArray[0] = tutorialUrlArray[0] + "_source"

var githubLink = "https://github.com/pytorch/tutorials/blob/master/" + tutorialUrlArray.join("/") + ".py",
notebookLink = $(".reference.download")[1].href,
notebookDownloadPath = notebookLink.split('_downloads')[1],
colabLink = "https://colab.research.google.com/github/pytorch/tutorials/blob/gh-pages/_downloads" + notebookDownloadPath;
var githubLink = "https://github.com/pytorch/tutorials/blob/master/" + tutorialUrlArray.join("/") + ".py";
var notebookLink = "";
// some versions of sphinx gallery have different orders of the download
// links so we need to check if the link ends with .ipynb to find the
// correct one
for (var i = 0; i < $(".reference.download").length; i++) {
notebookLink = $(".reference.download")[i].href;
if (notebookLink.endsWith(".ipynb")) {
break;
}
}
var notebookDownloadPath = notebookLink.split('_downloads')[1];
var colabLink = "https://colab.research.google.com/github/pytorch/tutorials/blob/gh-pages/_downloads" + notebookDownloadPath;
Copy link
Copy Markdown
Contributor Author

@ezyang ezyang Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uhh I'm not sure what this is lol


$("#google-colab-link").wrap("<a href=" + colabLink + " data-behavior='call-to-action-event' data-response='Run in Google Colab' target='_blank'/>");
$("#download-notebook-link").wrap("<a href=" + notebookLink + " data-behavior='call-to-action-event' data-response='Download Notebook'/>");
Expand Down Expand Up @@ -428,4 +437,3 @@ $(window).scroll(function () {
}
});
});

1 change: 0 additions & 1 deletion pytorch_sphinx_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,7 +712,6 @@ <h2>Resources</h2>
mobileTOC.bind();
pytorchAnchors.bind();
sideMenus.bind();
scrollToAnchor.bind();
highlightNavigation.bind();
mainMenuDropdown.bind();
filterTags.bind();
Expand Down
11 changes: 11 additions & 0 deletions pytorch_sphinx_theme/static/css/theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

118 changes: 13 additions & 105 deletions pytorch_sphinx_theme/static/js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,107 +383,6 @@ window.pytorchAnchors = {
};

},{}],9:[function(require,module,exports){
// Modified from https://stackoverflow.com/a/13067009
// Going for a JS solution to scrolling to an anchor so we can benefit from
// less hacky css and smooth scrolling.

window.scrollToAnchor = {
bind: function() {
var document = window.document;
var history = window.history;
var location = window.location
var HISTORY_SUPPORT = !!(history && history.pushState);

var anchorScrolls = {
ANCHOR_REGEX: /^#[^ ]+$/,
offsetHeightPx: function() {
var OFFSET_HEIGHT_PADDING = 20;
// TODO: this is a little janky. We should try to not rely on JS for this
return utilities.headersHeight() + OFFSET_HEIGHT_PADDING;
},

/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function() {
this.scrollToCurrent();
// This interferes with clicks below it, causing a double fire
// $(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
$('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
$('body').on('click', '#pytorch-right-menu li span', $.proxy(this, 'delegateSpans'));
},

/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function() {
return this.offsetHeightPx();
},

/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* @param {String} href
* @return {Boolean} - Was the href an anchor.
*/
scrollIfAnchor: function(href, pushToHistory) {
var match, anchorOffset;

if(!this.ANCHOR_REGEX.test(href)) {
return false;
}

match = document.getElementById(href.slice(1));

if(match) {
var anchorOffset = $(match).offset().top - this.getFixedOffset();

$('html, body').scrollTop(anchorOffset);

// Add the state to history as-per normal anchor links
if(HISTORY_SUPPORT && pushToHistory) {
history.pushState({}, document.title, location.pathname + href);
}
}

return !!match;
},

/**
* Attempt to scroll to the current location's hash.
*/
scrollToCurrent: function(e) {
if(this.scrollIfAnchor(window.location.hash) && e) {
e.preventDefault();
}
},

delegateSpans: function(e) {
var elem = utilities.closest(e.target, "a");

if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
e.preventDefault();
}
},

/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function(e) {
var elem = e.target;

if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
e.preventDefault();
}
}
};

$(document).ready($.proxy(anchorScrolls, 'init'));
}
};

},{}],10:[function(require,module,exports){
window.sideMenus = {
rightMenuIsOnScreen: function() {
return document.getElementById("pytorch-content-right").offsetParent !== null;
Expand Down Expand Up @@ -945,10 +844,19 @@ if (downloadNote.length >= 1) {
var tutorialUrlArray = $("#tutorial-type").text().split('/');
tutorialUrlArray[0] = tutorialUrlArray[0] + "_source"

var githubLink = "https://github.com/pytorch/tutorials/blob/master/" + tutorialUrlArray.join("/") + ".py",
notebookLink = $(".reference.download")[1].href,
notebookDownloadPath = notebookLink.split('_downloads')[1],
colabLink = "https://colab.research.google.com/github/pytorch/tutorials/blob/gh-pages/_downloads" + notebookDownloadPath;
var githubLink = "https://github.com/pytorch/tutorials/blob/master/" + tutorialUrlArray.join("/") + ".py";
var notebookLink = "";
// some versions of sphinx gallery have different orders of the download
// links so we need to check if the link ends with .ipynb to find the
// correct one
for (var i = 0; i < $(".reference.download").length; i++) {
notebookLink = $(".reference.download")[i].href;
if (notebookLink.endsWith(".ipynb")) {
break;
}
}
var notebookDownloadPath = notebookLink.split('_downloads')[1];
var colabLink = "https://colab.research.google.com/github/pytorch/tutorials/blob/gh-pages/_downloads" + notebookDownloadPath;

$("#google-colab-link").wrap("<a href=" + colabLink + " data-behavior='call-to-action-event' data-response='Run in Google Colab' target='_blank'/>");
$("#download-notebook-link").wrap("<a href=" + notebookLink + " data-behavior='call-to-action-event' data-response='Download Notebook'/>");
Expand Down